在CSS Grid中创建所有行(包括隐含行)的列跨度
问题描述:
我正在尝试制作一个网格列跨度为,每行行,包括隐式行。在CSS Grid中创建所有行(包括隐含行)的列跨度
我碰到this question问如何跨越所有网格行。第二个答案有一个更好的解决方案。这似乎是可行的,但我自己的例子和对第二个答案的评论表明它不起作用。
W3 spec也给出了一个非常接近的例子。
我的代码有问题吗?或者这可能是Firefox,Chrome,和 Safari中的错误?
I also have this example in a CodePen here。
* {
box-sizing: border-box;
}
.container {
border: 1px solid #666;
max-width: 1000px;
padding: 10px;
display: grid;
grid-template-columns: 150px 1fr 300px;
/* grid-template-rows: repeat(auto) [rows-end]; Doesn't seem to help */
/* grid-template-rows: [rows-start] repeat(auto) [rows-end]; Doesn't seem to help */
grid-template-rows: repeat(auto);
grid-gap: 10px;
margin: 10px auto;
grid-auto-flow: row dense;
/* justify-items: stretch; */
/* align-items: stretch; */
}
.container>* {
grid-column: 2/3;
padding: 10px;
outline: 1px solid #666;
}
.pop {
grid-column: 1/2;
/* grid-column: 1/-1; If I switch to this, this div will span the full width of the grid, which is exactly what I'm trying to do with rows*/
}
.tertiary {
grid-column: 1/2;
}
.secondary {
grid-column: 3/3;
grid-row: 1/-1;
/* Doesn't work */
/* grid-row: rows-start/rows-end; Doesn't work */
/* grid-row: 1/rows-end; Also doesn't work */
/* grid-row: 1/span 7; This works, but I need to span an unknown number of rows*/
/* grid-row: 1/span 99; This is gross and creates 99 rows */
}
<div class="container">
<div class="secondary">Secondary - why doesn't this span all the way to the bottom of the grid?</div>
<div class="tertiary">Tertiary</div>
<div class="tertiary">Tertiary</div>
<div class="tertiary">Tertiary</div>
<div>Primary</div>
<div>Primary</div>
<div>Primary</div>
<div class="pop">Span tertiary and primary</div>
<div>Primary</div>
<div class="tertiary">Tertiary</div>
<div>Primary</div>
<div>Primary</div>
</div>
答
有你的方式两个障碍。
首先,该行的CSS代码在你.container
规则:
grid-template-rows: repeat(auto);
此代码是无效的。 repeat()
表示法中的参数必须以正整数开始,该整数指定重复次数。你没有,所以代码不起作用。在spec的更多细节。
其次,即使上面的代码是正确的,让我们说:
grid-auto-rows: auto; (which happens to be the default setting anyway)
你列仍然不能跨越所有行。
这是因为,正如您在the other answer you cited中看到的那样,可以将轨道定义设置为仅覆盖显式网格中的所有垂直轨道。
所以这会工作:
grid-template-rows: repeat(6, auto);
问题的其余部分中详细说明了the other answer you cited。
感谢您澄清无效行代码。所以我回到了我的实际原始需求 - 是否有一种方法可以让第三列一直延伸到底部,当有*未知*行数时? – freshyill
是的,这个问题是在另一篇文章中探讨的。这是迄今为止社区使用纯CSS所提出的最好的方法。在网格布局中似乎没有一个干净的方法。 –
或者,您可以直接定位栅格项目:https://*.com/q/46308048/3597276 –