使用 CSS 网格布局跨所有列/行的项

随着 CSS 网格布局模块即将在 Firefox 和 Chrome 中发布，我想我应该尝试掌握如何使用它。

我尝试创建一个简单的网格，其中一个项目 a跨越所有行的左侧，另一个项目(b、 c、 d、 e等)跨越各行的右侧。横跨行右侧的项的数量是可变的，因此可能存在 b、 c、 d、 e等的任意组合，所以我使用的是 grid-auto-rows属性。因此，我不能定义 a跨越的固定行数，但我希望 a跨越 b2可用行。

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

我应该做什么，使 a跨越所有行，而不知道最终有多少行？

61369

小开

编辑: 不要介意这个答案，除非你是一个过时的浏览器;)

您可以使用 row 的 hudge 值来跨越 (至少和你认为的最大行数一样多):

grid-row: 1 / -1;12/19，仍然没有在 FF 工作。

编辑 grid-row: 1 / -1;现在也可以在最新的 Firefox 中使用。对于 Firefox 的行为来说，跨越一个 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>

还是说:

#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 */
align-self: center;
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>

这里是现场演奏的密码。