С модулем компоновки сетки 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>