CSS Mise en Page en Grille

Module de Mise en Page en Grille CSS

Le module de mise en page en grille propose un système de mise en page basé sur une grille, avec des lignes et des colonnes.

Ce module permet aux développeurs de créer facilement des mises en page web complexes.

Il facilite également la conception d'une structure de mise en page responsive, sans avoir recours à float ou à un positionnement.

Lorem Ipsum

Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut.

Essayez-le Vous-Même »

Grille vs. Flexbox

CSS Grid est utilisé pour une mise en page bidimensionnelle, avec des lignes ET des colonnes.

CSS Flexbox est utilisé pour une mise en page unidimensionnelle, avec des lignes OU des colonnes.

Composants de la Grille CSS

Une grille se compose toujours de :

Un Conteneur de Grille - L'élément parent (conteneur), où la propriété display est définie sur grid ou inline-grid
Un ou plusieurs Éléments de Grille - Les enfants directs du conteneur de grille deviennent automatiquement des éléments de grille.

Un Conteneur de Grille avec Cinq Éléments de Grille

L'élément ci-dessous représente un conteneur de grille (la zone bleue) avec cinq éléments de grille .

Exemple

Un conteneur de grille avec cinq éléments de grille :

 <html> 
 <head> 
 <style> 
 .container { 
 display: grid; 
 grid-template-columns: auto auto auto; 
 background-color: dodgerblue; 
 padding: 10px; 
 } 
 .container div { 
 background-color: #f1f1f1; 
 border: 1px solid black; 
 padding: 10px; 
 font-size: 30px; 
 text-align: center; 
 } 
 </style> 
 </head> 
 <body> 
 
 <div class="container"> 
 <div>1</div> 
 <div>2</div> 
 <div>3</div> 
 <div>4</div> 
 <div>5</div> 
 </div> 
 
 </body> 
 </html> 

Essayez-le Vous-Même »

Remarque : Vous en apprendrez davantage sur les conteneurs de grille et les éléments de grille dans les chapitres suivants.

Toutes les Propriétés de la Grille CSS

Propriété	Description
align-content	Aligne verticalement l'ensemble de la grille à l'intérieur du conteneur (lorsque la taille totale de la grille est inférieure à celle du conteneur).
align-items	Spécifie l'alignement par défaut pour les éléments à l'intérieur d'un conteneur flexbox ou grille.
align-self	Aligne le contenu d'un élément de grille spécifique le long de l'axe de la colonne.
display	Spécifie le comportement d'affichage (le type de boîte de rendu) d'un élément.
column-gap	Spécifie l'écart entre les colonnes.
gap	Une propriété abrégée pour les propriétés row-gap et column-gap .
grid	Une propriété abrégée pour les propriétés grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns et la propriété grid-auto-flow .
grid-area	Soit spécifie un nom pour l'élément de grille, soit cette propriété est une propriété abrégée pour les propriétés grid-row-start , grid-column-start , grid-row-end et grid-column-end .
grid-auto-columns	Spécifie une taille de colonne par défaut.
grid-auto-flow	Spécifie comment les éléments auto-placés sont insérés dans la grille.
grid-auto-rows	Spécifie une taille de ligne par défaut.
grid-column	Une propriété abrégée pour les propriétés grid-column-start et grid-column-end .
grid-column-end	Spécifie où terminer l'élément de grille.
grid-column-start	Spécifie où commencer l'élément de grille.
grid-row	Une propriété abrégée pour les propriétés grid-row-start et grid-row-end .
grid-row-end	Spécifie où terminer l'élément de grille.
grid-row-start	Spécifie où commencer l'élément de grille.
grid-template	Une propriété abrégée pour les propriétés grid-template-rows , grid-template-columns et grid-areas .
grid-template-areas	Spécifie comment afficher les colonnes et les lignes, en utilisant des éléments de grille nommés.
grid-template-columns	Spécifie la taille des colonnes et combien de colonnes dans une mise en page de grille.
grid-template-rows	Spécifie la taille des lignes dans une mise en page de grille.
justify-content	Aligne horizontalement l'ensemble de la grille à l'intérieur du conteneur (lorsque la taille totale de la grille est inférieure à celle du conteneur).
justify-self	Aligne le contenu d'un élément de grille spécifique le long de l'axe de la ligne.
place-self	Une propriété abrégée pour les propriétés align-self et justify-self .
place-content	Une propriété abrégée pour les propriétés align-content et justify-content .
row-gap	Spécifie l'écart entre les lignes de la grille.