随着CSS网格布局模块很快在Firefox和Chrome中出货，我想我会试着掌握如何使用它。
我试图用一个项目创建一个简单的网格 a 跨越所有行的左侧，与其他项目（b， c， d， e等等）跨越各行的右侧。跨越行右侧的项目数量是可变的，因此可能存在任何组合 b， c， d， e等等，所以我正在使用 grid-auto-rows 属性。因此，我无法为其定义固定数量的行 a 跨越，但我想 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>
7514
2018-02-15 02:40
起源
我正在深入研究CSS Grid，我遇到了完全相同的问题。我觉得我很遗憾。 - Miles
当我有一秒时，我会把它写成一个完整的答案，但关键是网格内的网格。因此，在“a”旁边创建另一个div，其中包含b，c，d，e和其他所有内容 - 让我们称之为'content_holder'。然后添加display：grid;到'content_holder'。它将自动调整内容大小，'a'将自动调整大小。 - Miles
我有同样的问题。 Supossedly网格行：1 / -1应该这样做，但它显然不适用于自动行:( - brohr
答案:
我有同样的情况，并找到了一个干净的解决方案。
不要使用巨大的行跨度值，请尝试：
grid-column: 1/-1;
由于负数从右侧开始计算，此代码将网格列指定为最后一列的末尾。
11
2018-05-30 20:09
你可以使用行的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>
0
2018-02-15 03:21
谢谢。不幸的是，这只适用于 grid-row-gap 未指定。如果 grid-row-gap 指定后，渲染器将插入与hudge行一样多的间隙.... - Marlius
（justify-self: center; 只是因为我在我的测试中使用了垂直方向的文本，我希望在列中居中。我应该从我发布的示例中删除它。抱歉！） - Marlius
@Marlius为 grid-row-gap，你可以把它变成保证金。我分叉我以前的笔来增加边距（间隙）和书写模式。codepen.io/gc-nomade/pen/ygwbyv （在第一个codepen的第三个例子中已经有一个间隙示例 codepen.io/gc-nomade/pen/xgBVKB :)。工作行高也不应该指定auto而不是auto。另一个使用javascript设置所需跨度值的示例： codepen.io/gc-nomade/pen/BpZZQW （与另一个类似问题有关） - G-Cyr
@Marlius用间隙值重新审视了jquery笔 codepen.io/gc-nomade/pen/pRYPwK - G-Cyr
通过 失败 我指的是你上面的谈话 grid-row-gap。我要摘下我联系的W3文件; “如果给出一个负整数，它将反向计数，从显式网格的结束边缘开始。”由于我不知道的原因，使用负索引提供纯CSS解决方案。 - AManOfScience