Grille simple avec des lignes alternées

Introduction

Ceci est une démonstration simple de la façon dont vous pouvez créer des grilles simples avec des rangées alternées. Dans cet exemple, vous avez une ligne avec trois éléments et une ligne avec deux.
Il s'agit d'une solution 100 % CSS et se résume à utiliser @property pour la valeur span de la propriété grid-columns.

Comment ça marche

Eh bien, c'est simple. Vous devez savoir combien de lignes différentes il y aura et combien d'éléments au total ces différentes lignes contiennent.

Dans mon exemple, ce serait :

• 2 lignes différentes
• 3 articles 2 articles = 5 articles

Cela signifie que lorsque vous effectuez le sélecteur :nth-child(), vous devez utiliser ce nombre total :

&: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;
}

La propriété personnalisée col-span est utilisée comme ceci :

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

Et c'est à peu près tout. C'est super simple, rien de bien grave, mais quand même utile à tout le monde.

Une solution plus conviviale mais plus complexe

Pour une solution plus conviviale, j'ai pensé à déclarer le nombre réel d'éléments au lieu de modifier l'étendue, car si vous modifiez le nombre de colonnes dans une grille, mais oubliez d'ajuster les étendues, vous obtenez un effet indésirable. C'est pourquoi j'ai ajouté une autre propriété personnalisée et je l'ai modifiée à la place.

La partie la plus malheureuse, quelle que soit la solution choisie, le sélecteur de nième enfant doit être modifié manuellement, ou via JavaScript, si vous souhaitez une solution entièrement dynamique. (Vous pouvez également utiliser SASS/SCSS, ce qui est évidemment aussi un bon moyen)

La propriété nouvellement ajoutée ressemble à ceci :

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

Pour les éléments vous pouvez modifier la valeur de la propriété --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;
}

Et les span-cols sont désormais calculés directement sur la classe .item, au lieu de sélectionner x.

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

Pour référence, les propriétés personnalisées des colonnes et des lignes sont déclarées comme suit :

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

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

Conclusion

J'espère que cela vous aidera à comprendre comment faire fonctionner ce type de grille.
Si vous trouvez des erreurs ou si vous avez des commentaires à me faire, écrivez un commentaire sur cet article !

Merci et je vous souhaite un bon week-end,
Kuraikari

Stylo original

Le stylo avec la propriété items

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!