CSS GridQuery peut-il créer des modèles de cellules de type serpent dans des grilles orientées colonnes ?

Grilles Snake-Line avec grille CSS

Requête : est-il possible de générer des modèles de cellules de type serpent dans une grille CSS orientée colonnes , similaire à l'exemple ci-dessous ?

    01 06 07 12
    02 05 08 11
    03 04 09 10

Solution :

En supposant que la grille aura toujours trois lignes, voici une solution astucieuse :

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

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

La clé à cette solution se trouve le sélecteur nth-child(), qui sélectionne les éléments enfants en fonction de leur position au sein de leur parent. Le flux automatique de grille : colonne dense est ce qui maintient l'élément dans une formation dense de colonnes.

Cette technique est particulièrement utile lorsque vous souhaitez la flexibilité d'un motif de remplissage en forme de serpent mais sans avoir à définir chaque position d'une seule cellule manuellement.

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!