Comment créer un motif de type serpent dans les grilles CSS avec le flux automatique de grille et la structure de lignes de grille ?

Utilisation de Grid-auto-flow pour le remplissage de cellules en ligne serpent

Dans les grilles CSS, Grid-auto-flow régit le placement automatique des éléments de la grille dans la grille. Par défaut, la propriété grid-auto-flow est définie sur row, ce qui remplit la grille par lignes.

Pour créer un motif en forme de serpent dans une grille basée sur des colonnes, nous pouvons modifier la propriété grid-auto-flow. propriété de flux vers une colonne dense. Cela remplira la grille par colonnes, mais de manière dense, ce qui signifie que les éléments rempliront l'espace disponible aussi étroitement que possible.

Pour produire le motif en forme de serpent souhaité, nous devons spécifier une structure de lignes de grille personnalisée pour déterminer quelles cellules doivent être placées dans chaque ligne. Ceci peut être réalisé en utilisant la propriété grid-row.

Considérez l'extrait de code suivant :

<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>

Ici, nous configurons une grille avec trois lignes et utilisons grid-auto-flow : column dense pour remplir la grille par colonnes. Nous utilisons ensuite le sélecteur nième enfant pour spécifier que chaque sixième élément enfant (4e, 10e, 16e, etc.) doit être placé dans la troisième ligne, et chaque cinquième élément enfant (5e, 11e, 17e, etc.) doit être placé dans la troisième ligne. placé au deuxième rang. Cela produit le motif alterné en forme de serpent comme vous le souhaitez.

<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>

Cet extrait de code produit le résultat suivant :

01 06 07
02 05 08
03 04 09

En manipulant le flux automatique de grille et en définissant une structure de lignes personnalisée. , vous pouvez utiliser des grilles CSS pour créer des motifs visuellement attrayants comme le remplissage de cellules en forme de serpent.

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!