Comment puis-je réorganiser les colonnes dans une disposition en grille CSS ?

Changer l'ordre des colonnes dans une grille CSS

Dans CSS Grid, vous pouvez définir la disposition d'une grille en spécifiant le nombre de colonnes et de lignes à l'aide de la grille- Propriétés des colonnes de modèle et des lignes de modèle de grille. Cependant, réorganiser l'ordre de ces colonnes peut être un défi.

Solution : Grid Auto Flow avec le mot-clé dense

Bien qu'il existe plusieurs façons de réorganiser les éléments de la grille, l'utilisation du mot-clé dense avec la propriété grid-auto-flow offre une solution simple et efficace :

<code class="css">grid-auto-flow: dense;</code>

Le mot-clé dense indique au navigateur de remplir automatiquement les cellules vides de la grille avec des éléments de grille, en les déplaçant pour remplir le espaces tout en conservant l'ordre spécifié.

Application à l'exemple

En ajoutant le mot-clé dense à la classe de grille existante, les colonnes se réorganiseront automatiquement sur une mise en page mobile pour faire correspondre l'ordre souhaité :

<code class="css">.my-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 15% 1fr 25%;
  grid-template-rows: 1fr; /* For as many rows as you need */
  grid-gap: 10px;
  border: 2px solid #222;
  box-sizing: border-box;
}</code>

Résultat :

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

Cette solution offre une approche pratique et robuste pour modifier l'ordre des colonnes sans recourir à des pré-processeurs .

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!