如何用隐式网格布局指代网格末端？

Question

我有a HTML document和以下片段

<main>
  <article>A</article>
  <article>B</article>
  <article>C</article>
  <article>D</article>
  <article>E</article>
  <article>F</article>
  <article>G</article>
  <article>H</article>
  <article>I</article>
  <article>J</article>
  <aside>Tall content</aside>
</main>

而且我想将所有文章放在左列，并将strech放在旁边作为右侧的侧边栏。

我尝试了以下CSS：

main
{
  display: grid;
  grid-template-columns: 1fr 15rem;
  grid-auto-rows: auto auto;
  gap: 1rem;
}

article
{
  grid-column: 1;
}

aside
{
  grid-column: 2;
  grid-row: 1 / -1;
}

但是，这不起作用。 原因是the -1 in grid-row refers to end of explicit grid。 如何引用隐式的结尾或整个网格？

文章列表是动态生成的，我不想不必说-1，这会使示例正常工作，但需要根据内容更改第二个数字。我非常希望所有内容的CSS保持静态。

Answer 1

grid-row

Answer 2

main {
  display: grid;
  grid-template-columns: 1fr 15rem;
  grid-auto-rows: auto auto;
  grid-gap: 1rem;
  border:1px solid;
  position:relative;
}

article {
  grid-column: 1;
  background:red;
  color:#fff;
  padding:5px;
}

aside {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15rem;
  background:blue;
  color:#fff;
}

<main>
  <article>A</article>
  <article>B</article>
  <article>C</article>
  <article>D</article>
  <article>E</article>
  <article>F</article>
  <article>G</article>
  <article>H</article>
  <article>I</article>
  <article>J</article>
  <aside>Tall content</aside>
</main>

main
{
  display: grid;
  grid-template-columns: 1fr 15rem;
  grid-auto-rows: auto auto;
  gap: 1rem;
}

article
{

  grid-template-columns: 200px 200px 200px;
}

aside
{
  grid-column: 2;
  grid-row: 1 / -1;
}

main > *
{
  color: #fff;
  background: #777;
  padding: 1rem;
  border-radius: 0.5rem;
}