Как сослаться на конец сетки с неявным расположением сетки? - PullRequest
Новая
       4

Как сослаться на конец сетки с неявным расположением сетки?

0 голосов
/ 18 февраля 2020

У меня есть a HTML документ со следующим фрагментом 

<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>

, и я хотел бы поместить все статьи в левую колонку и растянуть элемент как боковую панель справа.

Я попытался выполнить следующие действия: 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;
}

Однако это не работает. причина заключается в том, что -1 в grid-row относится к концу явной сетки . Как сослаться на конец неявного или всей сетки?

Список статей генерируется динамически, и я предпочел бы не произносить grid-row: 1 / 11 который заставил бы пример работать правильно, но требует изменения второго числа согласно содержанию. Я бы предпочел сохранить CSS stati c для всего контента.

1 Ответ

0 голосов
/ 18 февраля 2020 

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

article {
  grid-auto-rows: 50px;
}

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

main>* {
  color: #fff;
  background: #777;
  padding: 1rem;
  border-radius: 0.5rem;
}
<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>
  <article>J</article>
  <article>J</article>
  <article>J</article>
  <article>J</article>
  <div>
    <aside>Tall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall
      contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall contentTall content contentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall
      contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall
      contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall contentTall contentTall contentcontentTall
      contentTall contentTall content</aside>
  </div>
</main>
...