是否可以将每第二行与 CSS Grid 对齐?数量.item
未知。
这是 HTML/CSS:
.container {
grid-template-columns: repeat(4, 1fr);
}
<ul class="container">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<!-- ... -->
</ul>
预期解决方案:
![enter image description here](/image/UDCbz.png)
我也对 CSS Grid 以外的其他解决方案持开放态度。
最佳答案
您可以使用 nth-child()
以创建重复模式。
ul {
display: grid;
grid-template-columns: repeat(6, 1fr);/* 6 = 4 + 2 empty cells */
grid-auto-rows: 50px;/*demo purpose */
}
li {
display: block;
border: solid 1px;
}
li:nth-child(8n-3) {
grid-column: 3;
}
li:nth-child(8n + 1) {
grid-column: 1
}
/*demo purpose */
ul{counter-reset:lis;}
li:before {counter-increment:lis;content:counter(lis);}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
关于html - CSS 网格 : different alignment for every second row,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62000236/