Réorganisation des colonnes dans une disposition en grille CSS

Dans la disposition en grille CSS, il existe différentes techniques pour modifier l'ordre des colonnes afin d'obtenir des aménagements spécifiques. Cette question explore la possibilité de réorganiser les colonnes pour les mises en page mobiles, par exemple en déplaçant une colonne vers le bas tout en conservant l'ordre des colonnes souhaité sur les mises en page de bureau.

Options de solution :

1. grid-template-areas : Cette propriété vous permet de définir des zones nommées dans la grille, puis d'attribuer des éléments de grille à ces zones. En utilisant des zones nommées, vous pouvez contrôler la disposition et l'ordre des éléments sans vous fier à leur ordre initial dans le code source.
2. Placement basé sur la ligne : Avec le placement basé sur la ligne, vous pouvez utilisez les propriétés grid-column-* pour spécifier la colonne dans laquelle un élément doit être placé. En attribuant des éléments de grille à des colonnes spécifiques, vous pouvez contrôler leur ordre et leur position dans la grille.
3. propriété order : La propriété order vous permet de définir l'ordre dans lequel les éléments de grille apparaissent, quel que soit leur ordre. de leur ordre initial dans le code source. En spécifiant les valeurs de commande, vous pouvez déterminer la séquence visuelle des éléments dans la grille.
4. fonction dense de grille-auto-flow : La fonction dense de grille-auto-flow optimise la disposition de la grille en ajustant automatiquement le placement des éléments de la grille pour remplir l'espace disponible aussi efficacement que possible. Il peut être utilisé pour obtenir la mise en page mobile de la question, où les éléments sont déplacés vers de nouvelles lignes si nécessaire pour s'adapter à la taille d'écran plus petite.

Exemple de code :

L'exemple suivant montre l'utilisation de la fonction grid-auto-flow: dense pour obtenir la mise en page mobile décrite dans la question :

.container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense; /* optimizes item placement */
}

Avec ce code, les éléments de la grille seront automatiquement réorganisés pour remplir efficacement l'espace disponible, résultant en la disposition mobile souhaitée.