CSS グリッドを使用してヘビのようなグリッドの塗りつぶしを実現するにはどうすればよいですか?

蛇のようなグリッドの塗りつぶしに CSS グリッドを使用する

CSS グリッドでは、grid-auto-flow プロパティによってグリッド項目のレイアウトが制御されます。列ベースのグリッドでヘビのような塗りつぶしパターンを実現するには、このプロパティを利用できます。

3 行のグリッドがあり、ヘビのようなパターンでセルを塗りつぶしたい次のシナリオを考えてみましょう。マナー:

<code class="css">01 06 07 12
02 05 08 11
03 04 09 10</code>

これを実現するには、grid-auto-flow: columnsdens; を設定します。これにより、次の行に進む前に、まずグリッドの列が埋められます。 2 行目をオフセットするには、n 番目の子セレクターを使用して、次のように特定の項目を行 2 にプッシュできます。

<code class="css">.container .div:nth-child(6n + 5) { grid-row: 2; }</code>

3 行目の項目を移動するには、次のように使用できます。

<code class="css">.container .div:nth-child(6n + 4) { grid-row: 3; }</code>

これらの手法を組み合わせることで、列ベースのグリッド システム内で必要なヘビのような充填パターンが得られます。

サンプル コード

実装を示す実際の例を次に示します。

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

<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 グリッドを使用してヘビのようなグリッドの塗りつぶしを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。