CSS GridQuery 可以在面向列的網格中建立蛇形單元格模式嗎？

有CSS 網格的蛇線網格

查詢：在面向列的CSS 網格中產生蛇狀單元格模式是否可行，類似下面的例子？

    01 06 07 12
    02 05 08 11
    03 04 09 10

解：

假設網格總是有三行，這是一個聰明的解決方案：

<code class="css">.container {
  display: grid;
  grid-template-rows: 20px 20px 20px;
  grid-auto-columns: 20px;
  grid-auto-flow: column dense;
}

.container > div:nth-child(6n + 4) { grid-row: 3; }
.container > div:nth-child(6n + 5) { grid-row: 2; }

/* Cosmetic styles */
.container {
  grid-gap: 5px;
  counter-reset: num;
  margin: 10px;
}

.container > div {
  border: 1px solid;
}
.container > div:before {
  content: counter(num);
  counter-increment: num;
}</code>

關鍵這個解決方案是nth- child() 選擇器，它會根據子元素在父元素中的位置來選擇子元素。 grid-auto-flow: 列密集使元素保持密集的列結構。

當您想要蛇形填充模式的靈活性但又不必定義每個列時，此技術特別有用手動單一單元格的位置。

以上是CSS GridQuery 可以在面向列的網格中建立蛇形單元格模式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！