CSS GridQuery は列指向グリッドで蛇のようなセル パターンを作成できますか?

CSS グリッドを使用した蛇行グリッド

クエリ: 列指向の CSS グリッド内で蛇のようなセル パターンを生成することは可能ですか、以下の例と似ていますか?

    01 06 07 12
    02 05 08 11
    03 04 09 10

解決策:

グリッドには常に 3 行があると仮定すると、賢い解決策は次のとおりです:

<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() セレクターがあります。グリッド自動フロー: 列の密集は、要素を列の密な形成に保つものです。

このテクニックは、ヘビのような塗りつぶしパターンの柔軟性が必要だが、すべてを定義する必要がない場合に特に便利です。単一セルの位置を手動で調整します。

以上がCSS GridQuery は列指向グリッドで蛇のようなセル パターンを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。