CSS Grid : Guide Complet de la Mise en Page en Grille

Introduction a CSS Grid

CSS Grid est un systeme de mise en page bidimensionnel qui permet de definir des lignes et des colonnes simultanement. Contrairement a Flexbox qui travaille sur un seul axe a la fois, Grid gere les deux axes — ideal pour les mises en page complexes comme les dashboards, les galeries et les structures de page completes.

Pour activer Grid, appliquez display: grid au conteneur parent. Definissez ensuite les colonnes avec grid-template-columns et les lignes avec grid-template-rows. Les elements enfants se placent automatiquement dans les cellules de la grille.

L unite fr (fraction) est specifique a Grid. grid-template-columns: 1fr 2fr 1fr cree trois colonnes dont la deuxieme est deux fois plus large que les autres. L unite fr distribue l espace disponible proportionnellement apres deduction des tailles fixes.

Placement des Elements

Par defaut, les elements enfants remplissent les cellules dans l ordre du DOM, de gauche a droite et de haut en bas. Vous pouvez controler le placement explicitement avec grid-column et grid-row.

grid-column: 1 / 3 fait s etendre l element de la ligne de grille 1 a la ligne 3 (soit deux colonnes). grid-row: 2 / 4 fait s etendre l element sur deux lignes a partir de la deuxieme.

Les zones nommees offrent une approche plus visuelle : definissez grid-template-areas avec des noms de zones, puis assignez chaque element a sa zone avec grid-area. Le resultat est une carte visuelle de la mise en page directement dans le CSS.

Grilles Responsives

La fonction repeat(auto-fill, minmax(250px, 1fr)) cree une grille responsive sans media queries. Elle genere autant de colonnes que possible d au moins 250px, et les elements se redistribuent automatiquement quand la largeur de l ecran change.

auto-fill cree des colonnes vides pour remplir l espace disponible. auto-fit etend les colonnes existantes pour occuper tout l espace. La difference est subtile mais importante pour les grilles avec peu d elements.

Combinez Grid avec les media queries pour des ajustements majeurs de la mise en page (passer de 3 colonnes a 1 colonne sur mobile) tout en laissant auto-fill gerer les ajustements intermediaires.

Gap et Alignement

La propriete gap (anciennement grid-gap) definit l espacement entre les cellules. gap: 20px ajoute 20 pixels entre toutes les cellules. gap: 20px 10px definit 20px entre les lignes et 10px entre les colonnes.

L alignement dans Grid utilise justify-items et align-items pour positionner les elements dans leurs cellules, et justify-content et align-content pour positionner la grille dans son conteneur.

Notre Generateur CSS Grid

Notre Generateur CSS Grid vous permet de creer des grilles visuellement. Definissez les colonnes et les lignes, placez les elements par glisser-deposer, ajustez les gaps et copiez le CSS genere. Experimentez avec les mises en page sans ecrire de code manuellement.