Grid-Auto-Flow を使用して CSS グリッドでスネークライン塗りつぶしパターンを作成する方法

蛇行のグリッド自動フロー

CSS グリッドでは、grid-auto-flow プロパティを使用して蛇のような塗りつぶしパターンを作成できます。このプロパティは、グリッド内の残りのスペースをどのように埋めるかを決定します。ヘビのようなパターンを実現する 1 つの方法は、grid-auto-flow プロパティの列密値を使用することです。これにより、使用可能なセルが列ごとに埋められ、次の行に移動します。

蛇行パターンを作成するには、常に 3 つのセルが存在するという事実を利用できます。グリッド内の行。 :nth-child セレクターを使用すると、4 番目、5 番目、6 番目の要素をそれぞれ 3 行目、2 行目、1 行目に配置するように指定できます。これにより、ヘビのような塗りつぶしパターンが作成されます。

<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 中国語 Web サイトの他の関連記事を参照してください。