如何使用 Grid-Auto-Flow 在 CSS 網格中建立蛇線填滿圖案？

蛇線中的網格自動流動

在 CSS 網格中，可以使用 grid-auto-flow 屬性建立蛇狀填滿圖案。此屬性決定如何填滿網格中的剩餘空間。實現蛇狀模式的一種方法是使用 grid-auto-flow 屬性的列密集值。這將以逐列的方式填充可用的單元格，然後移動到下一行。

要創建蛇線圖案，我們可以利用這樣的事實：總是有三個網格中的行。透過使用 :nth-child 選擇器，我們可以指定每第四、第五和第六個元素應分別放置在第三、第二和第一行。這將創建蛇狀填滿圖案。

<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; }

/* Irrelevant 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>

此 CSS 將產生以下結果：

<code class="html"><div class="container">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="container">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="container">
  <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div></code>

以上是如何使用 Grid-Auto-Flow 在 CSS 網格中建立蛇線填滿圖案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！