Элементы, которые охватывают все столбцы/строки, используя макет сетки CSS

С модулем компоновки сетки CSS, который скоро будет отправлен в Firefox и Chrome, я подумал, что попытаюсь получить представление о том, как его использовать.

Я попытался создать простую сетку с одним элементом a, охватывающим левую часть всех строк, с другими элементами (b, c, d, e и т.д.)..), охватывающий правую сторону отдельных строк. Количество элементов, расположенных справа от строк, является переменной, поэтому может быть любая комбинация b, c, d, e и т.д., Поэтому я использую свойство grid-auto-rows, Таким образом, я не могу определить фиксированное количество строк для a для span, но я хотел бы, чтобы a охватывал все доступные строки.

#container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-template-columns: [left] 4rem [right] 1fr;
    margin: 0rem auto;
    max-width: 32rem;
}
#a {
    background: lightgreen;
    grid-column: left;
    grid-row: 1 / auto;
    justify-self: center;
}
#b {
    grid-area: auto / right;
    background: yellow;
}
#c {
    grid-area: auto / right;
    background: pink;
}
#d {
    grid-area: auto / right;
    background: lightskyblue;
}
#e {
    background: plum;
    grid-area: auto / right;
}
<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
</div>

Ответы

Ответ 1

У меня была такая же ситуация и я нашел чистое решение.

Вместо использования огромного значения диапазона строк, попробуйте:

    grid-column: 1/-1;

Поскольку отрицательное число отсчитывается справа, этот код указывает столбец сетки до конца последнего столбца.

Ответ 2

Вы можете использовать hudge-значение строки для охвата (по крайней мере, столько, сколько вы полагаете, что может быть максимум строк):

#container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  justify-self: center;/* ? what did you mean here ? */
  /* did you mean : */
  display:flex;
  align-items:center;
}
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: plum;
  grid-area: auto / right;
}
<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>