随着CSS网格布局模块即将在Firefox和Chrome中发布，我想我应该尝试一下如何使用它。
我尝试创建一个简单的网格，其中一个项目a横跨所有行的左侧，其他项目(B、C、D、E等）横跨各个行的右侧。横过行右侧的项的数量是可变的，因此可能存在b、c、d、e等的任何组合，因此我使用了Grid-auto-rows属性。因此，我无法为a定义要跨转的固定行数，但我希望a跨转所有可用行。
null
#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>null
要使a跨越所有行而不知道最终会有多少行，我应该做什么？
我也有过同样的情况，找到了一个干净的解决方案。
不要使用巨大的行跨度值，请尝试：
grid-column: 1/-1;
由于负数从右边开始计数，此代码将网格列指定到最后一列的末尾。
注意：如果这不适用，请查看下面评论中的Jonny Green的解决方案。
您可以使用hudge值row to span（至少与您认为的最大行数相同）：
网格-行：1/-1；12/19，在FF中仍不工作。
null
#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>