考虑以下示例:
div {
border: 1px solid black;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.container > div {
min-height: 40px;
}
.item3 {
grid-row: span 3;
}
.item4 {
grid-column: span 2;
}
.item5 {
grid-row: span 3;
}
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
为什么第5个元素上的
grid-gap
这样工作?好像间隙现在是元素的一部分。我希望该元素的底端与第7个元素的底端对齐。第三个元素可以正常工作。这是Fiddle。编辑
如果想要的效果是显示最后一行(隐式),则解决方案是添加
grid-auto-rows: 1fr;
。请参见Fiddle。 最佳答案
在项目5上,您具有grid-row: span 3
。
您只需要span 2
。
使用span 3
,您已经创建了一个额外的行,第五行跨入该行。
项7和8的跨度没有那么长。
请注意,网格应具有5行行(创建3行),但是项目5上的span 3
创建不必要的第6行行(创建4行)。
项目3上的span 3
正常工作。
div {
border: 1px solid black;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.container > div {
min-height: 40px;
}
.item3 {
grid-row: span 3;
}
.item4 {
grid-column: span 2;
}
.item5 {
grid-row: span 2; /* adjustment */
}
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
span
关键字请记住,
span
计算行/列行。因此,再次参考图片:
grid-column: 1 / span 4
,将跨越整个网格,并创建一个额外的列。grid-row: 2 / span 3
,将从第二行开始遍及整个网格。grid-row: 3 / span 3
,将从第三行开始沿整个网格延伸,并创建一个额外的行(例如问题中的问题)More about the
span
keyword in the spec