使用CSS网格将项目成对放置在两行中可以通过以下步骤实现:
<div class="grid-container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 将容器分为两列 */
grid-gap: 10px; /* 设置项目之间的间隔 */
}
.item {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
.item:nth-child(odd) {
grid-row: 1; /* 将奇数项目放置在第一行 */
}
.item:nth-child(even) {
grid-row: 2; /* 将偶数项目放置在第二行 */
}
完整的代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.item {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
.item:nth-child(odd) {
grid-row: 1;
}
.item:nth-child(even) {
grid-row: 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item">项目1</div>
<div class="item">项目2</div>
<div class="item">项目3</div>
<div class="item">项目4</div>
<div class="item">项目5</div>
<div class="item">项目6</div>
</div>
</body>
</html>
这样,项目将被成对放置在两行中,奇数项目在第一行,偶数项目在第二行。你可以根据需要调整项目的样式和布局。
云原生正发声
北极星训练营
北极星训练营
云+社区技术沙龙[第27期]
云+社区技术沙龙 [第30期]
云+社区技术沙龙[第7期]
北极星训练营
领取专属 10元无门槛券
手把手带您无忧上云