交互の行を持つ単純なグリッド

導入

これは、交互の行を持つ簡単なグリッドを作成する方法を示す簡単なデモンストレーションです。この例では、1 行に 3 つの項目があり、1 行に 2 つの項目があります。
これは 100% CSS ソリューションであり、要約すると、grid-columns プロパティのスパン値に @property を使用することになります。

---

仕組み

それは簡単です。異なる行が何行存在するか、およびこれらの異なる行に含まれるアイテムの合計数を知る必要があります。

私の例では次のようになります:

• 2 つの異なる行
• 3 アイテム 2 アイテム = 5 アイテム

これは、:nth-child() セレクターを実行するときに、その合計数を使用する必要があることを意味します:

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --col-span: 4;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --col-span: 6;
}

col-span カスタム プロパティは次のように使用されます:

.item {
    ...
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    ...
}

これでほぼ終わりです。非常にシンプルで大したことはありませんが、それでも誰にとっても役立ちます。

---

よりデザイナーフレンドリーだがより複雑なソリューション

よりデザイナーに優しい解決策として、スパンを変更する代わりにアイテムの実際の量を宣言することを考えました。グリッド内の列数を変更してもスパンの調整を忘れると、望ましくない影響が生じるからです。そのため、別のカスタム プロパティを追加し、代わりにそれを変更しました。

最も残念な点は、どのソリューションを選択するかに関係なく、完全に動的なソリューションが必要な場合は、nth-child セレクターを手動で変更するか、JavaScript を使用して変更する必要があることです。 (SASS / SCSS を使用することもできます。これも明らかに良い方法です)

新しく追加されたプロパティは次のようになります:

@property --row-items {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

項目については、プロパティ --row-items の値を変更できます

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --row-items: 3;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --row-items: 2;
}

そして、span-col は x を選択するのではなく、.item クラスで直接計算されるようになりました。

.item {
    --span-cols: calc(var(--grid-cols) / var(--row-items));
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
}

参考までに、列と行のカスタム プロパティは次のように宣言されます。

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

---

結論

この種のグリッドを機能させる方法を理解するのに役立つことを願っています。
間違いを見つけた場合、または私に何らかのフィードバックがある場合は、この投稿にコメントを書いてください!

ありがとうございます。素敵な週末をお過ごしください。
クライカリ

---

オリジナルペン

---

items プロパティを持つペン

以上が交互の行を持つ単純なグリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。