交互の行を持つ単純なグリッド-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-08 16:23:10

オリジナル

737 人が閲覧しました

Simple Grid With Alternating Rows

導入

これは、交互の行を持つ簡単なグリッドを作成する方法を示す簡単なデモンストレーションです。この例では、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;
}

ログイン後にコピー