当您有3列时，连续处理2个项目
在3列网格中，如果最后一行只有2个项目，那么可以像附件图像一样布置它们？仅使用CSS而不添加空白条目，这是否可以？
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-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="item7">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>In a 3 column grid if the last line has only 2 items is it possible to have them laid out like the attached image? Is this possible using just CSS and not adding a blank entry?
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-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="item7">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您有3个元素的重复模式（
3n），您希望最后一个元素
：Last-Child在第三列中，如果它位于第二个div中：nth -child（3n -1）。共同规则将是
div：nth-child（3n-1）：Last-Child。下面的演示
You have a repeating pattern of 3 elements (
3n)You want the last element
:last-childto be in the third column if it stands in the seconddiv:nth-child(3n - 1).the rules together would be
div:nth-child(3n - 1):last-child.Demo below
因为您有一个 explicit
goce> grid您可以允许特定的孩子使用网格列范围：-2 / -1; < / code>在您的最后一个孩子上。这告诉网格区域从第三列线到最后一行线，有效地在最后一行中进行了空间。见下文：
Because you have an explicit
gridyou can allow a specific child to span all columns by usinggrid-column: -2 / -1;on your last child. This tells the grid area to span from the third column line to the last column line, effectively getting space-between on the last row.See below: