Comment créer un motif de remplissage Snake-Line dans une grille CSS avec Grid-Auto-Flow ?

Grid-Auto-Flow dans Snake Lines

Dans la grille CSS, il est possible de créer un motif de remplissage en forme de serpent en utilisant la propriété grid-auto-flow. Cette propriété détermine la manière dont l'espace restant dans la grille est rempli. Une façon d'obtenir un modèle semblable à un serpent consiste à utiliser la valeur de densité de colonne pour la propriété grid-auto-flow. Cela remplira les cellules disponibles colonne par colonne, puis passera à la ligne suivante.

Pour créer un motif en forme de serpent, nous pouvons utiliser le fait qu'il y en aura toujours trois lignes dans la grille. En utilisant le sélecteur :nth-child, nous pouvons spécifier que chaque quatrième, cinquième et sixième élément doit être placé respectivement dans les troisième, deuxième et première lignes. Cela crée le motif de remplissage en forme de serpent.

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

/* Irrelevant 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>

Ce CSS produira le résultat suivant :

<code class="html"><div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div></code>

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!