Conteneur de grille CSS

Essayez-le vous-même »

Conteneur de grille

Pour faire d'un élément HTML un conteneur de grille, vous pouvez définir la propriétédisplaysurgridouinline-grid。

Les éléments de grille composés de colonnes et de lignes sont placés à l'intérieur du conteneur de grille.

Propriété grid-template-columns

La propriété grid-template-columns définit le nombre de colonnes dans la mise en page en grille, et elle peut également définir la largeur de chaque colonne.

La valeur de la propriété est une liste séparée par des espaces, où chaque valeur définit la largeur de la colonne correspondante.

Si vous souhaitez que la mise en page de grille contienne 4 colonnes, vous devez définir les largeurs des 4 colonnes. Si toutes les colonnes ont la même largeur, vous pouvez la définir surauto。

L’exemple suivant configure une mise en page de grille à 4 colonnes :

Exemple

.grid-container { display: grid; grid-template-columns: auto auto auto auto; }

Essayez-le vous-même »

Remarque :Si vous avez plus de 4 éléments de grille dans une grille à 4 colonnes, la mise en page de grille générera une nouvelle ligne pour placer cet élément.

grid-template-columnsLa propriété peut aussi être utilisée pour spécifier la largeur des colonnes.

Exemple

.grid-container { display: grid; grid-template-columns: 80px 200px auto 40px; }

Essayez-le vous-même »

propriété grid-template-rows

La propriété grid-template-rows définit la hauteur de chaque ligne.

La valeur de la propriété est une liste séparée par des espaces, où chaque valeur définit la hauteur de la ligne correspondante :

Exemple

.grid-container { display: grid; grid-template-rows: 80px 200px; }

Essayez-le vous-même »

propriété justify-content

La propriété justify-content est utilisée pour aligner la grille dans le conteneur, en spécifiant comment répartir l'espace entre et autour des éléments le long de l'axe principal du conteneur flex (ou de l'axe de ligne de la grille).

Remarque :La largeur totale de la grille doit être inférieure à la largeur du conteneur pour que la propriété justify-content prenne effet.

justify-contentPour plus de détails, consultez :propriété CSS justify-content

Exemple

.grid-container { display: grid; justify-content: space-evenly; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; justify-content: space-around; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; justify-content: space-between; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; justify-content: center; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; justify-content: start; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; justify-content: end; }

Essayez-le vous-même »

propriété align-content

align-contentLa propriété est utilisée pour définir comment les éléments de grille sont alignés verticalement dans le conteneur.

Remarque :La hauteur totale des éléments de grille doit être inférieure à la hauteur du conteneur pour que la propriété align-content prenne effet.

Exemple

.grid-container { display: grid; height: 400px; align-content: center; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; height: 400px; align-content: space-evenly; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; height: 400px; align-content: space-around; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; height: 400px; align-content: space-between; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; height: 400px; align-content: start; }

Essayez-le vous-même »

Exemple

.grid-container { display: grid; height: 400px; align-content: end; }

Essayez-le vous-même »
autres extensions