html - CSS 网格 : different alignment for every second row

Question

是否可以将每第二行与 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>

预期解决方案:


我也对 CSS Grid 以外的其他解决方案持开放态度。

Answer 1

您可以使用 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>