我试图使网格列跨越每一行,包括隐含的行。
我遇到了这个问题,问如何跨越所有网格行。第二个答案有一个更好的解决方案。这似乎可以工作,但我的例子和第二个答案的评论表明它不起作用。 W3规范也给出了非常接近的示例。
我的代码有问题吗?还是Firefox、Chrome和Safari可能存在错误? 我在CodePen中也有这个例子。
我遇到了这个问题,问如何跨越所有网格行。第二个答案有一个更好的解决方案。这似乎可以工作,但我的例子和第二个答案的评论表明它不起作用。 W3规范也给出了非常接近的示例。
我的代码有问题吗?还是Firefox、Chrome和Safari可能存在错误? 我在CodePen中也有这个例子。
* {
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>