有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中文網其他相關文章！
