Comment obtenir un remplissage de grille semblable à un serpent à l'aide d'une grille CSS ?

Utilisation d'une grille CSS pour un remplissage de grille semblable à un serpent

Dans les grilles CSS, la propriété grid-auto-flow contrôle la disposition des éléments de la grille. Pour obtenir un motif de remplissage en forme de serpent dans une grille basée sur des colonnes, nous pouvons exploiter cette propriété.

Considérons le scénario suivant dans lequel nous avons une grille à 3 lignes et souhaitons remplir les cellules en forme de serpent. manière :

<code class="css">01 06 07 12
02 05 08 11
03 04 09 10</code>

Pour y parvenir, nous pouvons définir grid-auto-flow: column dense;. Cela remplira d'abord les colonnes de la grille, avant de passer à la ligne suivante. Pour décaler la deuxième ligne, nous pouvons utiliser le sélecteur de nième enfant pour pousser des éléments spécifiques vers la ligne 2 comme :

<code class="css">.container .div:nth-child(6n + 5) { grid-row: 2; }</code>

Pour déplacer les éléments de la troisième ligne, nous pouvons utiliser :

<code class="css">.container .div:nth-child(6n + 4) { grid-row: 3; }</code>

En combinant ces techniques, nous obtenons le motif de remplissage en forme de serpent souhaité dans un système de grille basé sur des colonnes.

Exemple de code

Voici un exemple fonctionnel qui démontre la mise en œuvre :

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

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