Réorganiser les colonnes de la grille CSS

Introduction

La grille CSS fournit un système de mise en page flexible pour le contenu Web, y compris la possibilité de contrôler l'ordre et le positionnement des colonnes. Cette question porte sur la modification de l'ordre des colonnes dans une grille CSS.

Propriété Grid-template-areas

Une méthode pour réorganiser les colonnes de la grille consiste à utiliser la propriété grid-template-areas. Cela vous permet de définir des zones spécifiques dans la grille et d'attribuer des colonnes à ces zones. Par exemple :

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

Cela déplacerait l'élément col3 au début de la ligne, suivi de l'élément col1.

Placement basé sur la ligne

Vous pouvez également utiliser le placement basé sur la ligne pour contrôler l’ordre des colonnes. Cela implique de placer les éléments de grille les uns après les autres le long des lignes de la grille, les propriétés « grid-column-start » et « grid-column-end » déterminant les emplacements de début et de fin.

Par exemple, pour positionner le élément col3 après l'élément col1 :

.col3 {
  grid-column-start: 2;
}

Propriété Order

La propriété order définit l'ordre des éléments de la grille dans une piste. Les valeurs inférieures à 0 placent l'élément avant le début de la piste, tandis que les valeurs supérieures à 0 le placent après la fin de la piste.

Pour déplacer l'élément col3 vers la première position :

.col3 {
  order: -1;
}

Fonction dense

La fonction dense de la propriété grid-auto-flow peut également être utilisée pour réorganiser les colonnes de la grille. Il aligne les éléments dans l'espace disponible, en commençant par le début du conteneur de grille, en ignorant toutes les cellules vides de la grille.

Pour déplacer l'élément col3 au début de la deuxième ligne :

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

En mettant en œuvre ces techniques, vous pouvez réorganiser dynamiquement les colonnes de la grille pour répondre aux exigences de mise en page souhaitées sur différentes tailles d'écran ou orientations d'appareil.