Display Grid CSS est un outil puissant qui permet de créer des mises en page en deux dimensions sur le Web.
Des grilles similaires aux tableaux permettent aux développeurs d'aligner des éléments dans différentes colonnes et lignes. Mais, la principale différence est que, contrairement aux tableaux, de nombreuses autres mises en page sont possibles ou plus faciles avec la grille CSS. Par exemple, les éléments enfants d'un conteneur de grille pourraient se positionner de manière à ce qu'ils se chevauchent et se superposent, comme les éléments positionnés en CSS.
Une mise en page de grille se compose d'un élément parent, avec un ou plusieurs éléments enfants.
HTML example
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
Grid Container
Vous pouvez créer un conteneur de grille en définissant la propriété display avec la valeur grid ou inline-grid.
Tous les enfants directs des conteneurs de grille deviennent des éléments de grille.
.grid-container {
display: grid;
}
/* ou */
.grid-container {
display: inline-grid;
}
display: grid;
display: inline-grid;
Grid Columns
Pour voir quelque chose qui ressemble plus à une grille, nous devrons définir certaines colonnes sur la grille. Vous pouvez utiliser n'importe quelle unité de longueur ou pourcentage pour créer ces pistes de colonne.
Définissons trois colonnes égales de 200 pixels de largeur.
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px; /* trois colonnes égales de 200 pixels de largeur */
}
Essayons différentes largeurs de colonnes.
.grid-container {
display: grid;
grid-template-columns: 90px 150px 250px; /* ddifférentes largeurs de colonnes */
}
Essayons de faire une grille flexible.
En plus de créer des grilles à l'aide de longueurs et de pourcentages, nous pouvons utiliser l'unité fr pour dimensionner de manière flexible les lignes et les colonnes de la grille. Cette unité représente une fraction de l'espace disponible dans le conteneur de grille.
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
Grid Rows
Une ligne de grille est une piste horizontale dans une disposition de grille CSS, c'est-à-dire l'espace entre deux lignes de grille horizontales. Il est défini par la propriété grid-template-rows ou dans les propriétés raccourcies grid ou grid-template.
Définissons deux exemples de lignes.
.grid-container {
display: grid;
grid-template-rows: 50px 100px; /* nous avons défini la hauteur des deux premières lignes */
}
Comme pour les colonnes de la grille, nous pouvons utiliser des unités différentes.
grid-template-rows: auto;
grid-template-rows: 40px 4em 40px;
grid-template-rows: 1fr 2fr 1fr;
grid-template-rows: 3ch auto minmax(10px, 60px);
Grid Gaps (Écarts de grille)
Les propriétés grid-column-gap et grid-row-gap créent des écarts entre les colonnes et les lignes
Utilisons notre premier exemple mais cette fois nous ajouterons des espaces entre les colonnes.
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px; /* largeur de trois colonnes 200px */
grid-column-gap: 10px;
}
Maintenant, nous faisons la même chose avec des espaces entre les rangées. Si simple!
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px; /* largeur de trois colonnes 200px */
grid-column-gap: 10px;
grid-row-gap: 10px;
}
