CSS 网格：每隔一行的对齐方式不同

Question

是否可以使用 CSS 网格将每隔一行向右对齐并每隔一行向左对齐？数量.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 网格之外的其他解决方案持开放态度。

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>