Voici quelques titres basés sur des questions pour votre article, axés sur le thème principal de la réorganisation des colonnes dans les grilles CSS : Court et percutant : * Comment réorganiser les colonnes dans les grilles CSS : quatre technologies puissantes

Réorganisation des colonnes dans les grilles CSS

Lorsque vous travaillez avec des grilles CSS, vous pouvez rencontrer le besoin de réorganiser l'ordre des colonnes, en particulier lors de l'adaptation mises en page pour différents appareils. Cet article explore quatre méthodes pour atteindre cette flexibilité :

1. grid-template-areas

Cette propriété vous permet de définir des zones de grille nommées et d'attribuer des éléments de grille à ces zones. En réorganisant les zones du modèle, vous pouvez également contrôler l'ordre des colonnes.

2. Placement basé sur des lignes

La grille CSS prend également en charge le placement basé sur des lignes, où les éléments sont placés séquentiellement le long des lignes de la grille. L'ordre des éléments dans le code source détermine leur position dans la grille.

3. Propriété order

La propriété order spécifie l'ordre des éléments dans une cellule de la grille. En attribuant différentes valeurs d'ordre aux articles, vous pouvez contrôler leur placement dans la grille sans affecter l'ordre source.

4. Fonction dense de Grid-Auto-Flow

La fonction dense de Grid-Auto-Flow vous permet d'éviter les cellules de grille vides. Lorsqu'elle est combinée avec des éléments couvrant plusieurs colonnes, cette fonction déplace efficacement d'autres éléments de la grille dans toutes les cellules vides disponibles.

Exemple

En utilisant la fonction dense, vous pouvez réorganiser les colonnes comme celle-ci :

<code class="css">.my-grid {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense;
}</code>

Cela donnera la présentation mobile suivante :

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

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!