Grid-Auto-flow と Grid Row Structure を使用して CSS グリッドで蛇のようなパターンを作成する方法

スネークラインのセル充填に Grid-auto-flow を使用する

CSS グリッドでは、grid-auto-flow がセルの自動配置を制御します。グリッド内のグリッド項目。デフォルトでは、grid-auto-flow プロパティは row に設定されており、行ごとにグリッドを埋めます。

列ベースのグリッドでヘビのようなパターンを作成するには、grid-auto-カラム密度に対する流動特性。これによりグリッドが列ごとに埋められますが、密度が高くなります。つまり、アイテムが利用可能なスペースをできるだけ密に埋めます。

目的の蛇のようなパターンを生成するには、カスタム グリッド行構造を指定して決定する必要があります。どのセルを各行に配置するか。これは、grid-row プロパティを使用して実現できます。

次のコード スニペットを考えてみましょう:

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

ここでは、3 行のグリッドを設定し、grid-auto-flow を使用します。列密度を指定してグリッドを列ごとに埋めます。次に、nth-child セレクターを使用して、6 番目ごとの子要素 ​​(4 番目、10 番目、16 番目など) を 3 行目に配置し、5 番目ごとの子要素 ​​(5 番目、11 番目、17 番目など) を 3 行目に配置するように指定します。 2列目に配置されます。これにより、必要に応じて蛇のような交互パターンが生成されます。

<code class="html"><div class="container">
  <!-- Each div represents one cell -->
  <div></div>
<div></div>
<div></div>
  <div></div>
<div></div>
<div></div>
</div></code>

このコード スニペットは次の出力を生成します。

01 06 07
02 05 08
03 04 09

grid-auto-flow を操作し、カスタム行構造を定義することにより、では、CSS グリッドを使用して、蛇行のセルの塗りつぶしなど、視覚的に魅力的なパターンを作成できます。

以上がGrid-Auto-flow と Grid Row Structure を使用して CSS グリッドで蛇のようなパターンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。