La propriété CSS "display: grid" est utilisée pour créer un layout en grille avec des colonnes et des lignes pour aligner et placer des éléments HTML. Cette propriété est très utile pour créer des designs complexes et flexibles en utilisant les fonctionnalités de grille en CSS.
Flexible comme Flex ? Oui... Et non... Le display grid a beaucoup de similarité avec flex mais offre l'avantage de mieux gérer les éléments en deux dimensions. Là où flex aura tendance être utilisé en axe X ou en axe Y mais il sera moins aisé de l'utiliser pour les deux axes à la fois.
Le choix vous est libre mais lorsque vous devrez gérer un design en "grille", display grid sera souvent plus adapté.
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}
</style>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
Bien sûr, la propriété "grid-template-columns" est une autre propriété clé utilisée avec la propriété "display: grid" en CSS. Elle permet de définir la largeur de chaque colonne dans la grille. Vous pouvez spécifier les largeurs de chaque colonne en utilisant une combinaison de valeurs en pixels, en pourcentage ou en fraction de l'espace disponible (utilisation de la valeur "fr"). Par exemple, la valeur "grid-template-columns: 1fr 2fr 1fr" créera trois colonnes, la première et la troisième ayant une largeur égale à un tiers de l'espace disponible et la deuxième ayant une largeur égale à deux tiers de l'espace disponible.
Cette propriété est utilisée pour définir la hauteur de chaque ligne dans la grille. Vous pouvez spécifier les hauteurs de chaque ligne en utilisant une combinaison de valeurs en pixels, en pourcentage ou en fraction de l'espace disponible (utilisation de la valeur "fr"). Par exemple, la valeur "grid-template-rows: 100px 50px 1fr" créera trois lignes, la première ayant une hauteur de 100 pixels, la deuxième de 50 pixels et la dernière occupera l'espace restant.
Grid-auto-rows: Cette propriété est utilisée pour définir la hauteur des lignes qui ne sont pas définies dans la propriété "grid-template-rows". Vous pouvez spécifier la hauteur en utilisant les mêmes unités que pour la propriété "grid-template-rows", ou en utilisant la valeur "max-content", "min-content" ou "auto". La valeur "max-content" définit la hauteur de la ligne en fonction du contenu le plus haut de la cellule, tandis que la valeur "min-content" définit la hauteur de la ligne en fonction du contenu le plus bas de la cellule. Vous pouvez également utiliser le raccourci "minmax" pour définir le minimum et maximum
Cette propriété est utilisée pour définir la largeur des colonnes qui ne sont pas définies dans la propriété "grid-template-columns". Vous pouvez spécifier la largeur en utilisant les mêmes unités que pour la propriété "grid-template-columns", ou en utilisant la valeur "max-content", "min-content" ou "auto". La valeur "max-content" définit la largeur de la colonne en fonction du contenu le plus large de la cellule, tandis que la valeur "min-content" définit la largeur de la colonne en fonction du contenu le plus étroit de la cellule.
Cette propriété est utilisée pour spécifier comment les éléments de la grille doivent être placés automatiquement dans la grille. La valeur par défaut est "row", qui aligne les éléments horizontalement en remplissant chaque ligne de la grille avant de passer à la suivante. La valeur "column" aligne les éléments verticalement en remplissant chaque colonne de la grille avant de passer à la suivante. Vous pouvez également utiliser les valeurs "row dense" et "column dense" pour remplir les trous vides de la grille si cela est possible.
Cette propriété permet de définir des zones dans la grille, nommées en utilisant des noms de chaînes, puis d'affecter chaque élément de la grille à l'une des zones. Vous pouvez ensuite utiliser la propriété "grid-area" pour placer les éléments dans les zones définies. Cette propriété permet une disposition très flexible des éléments de la grille. Par exemple, la valeur "grid-template-areas: 'header header header' 'main main aside' 'footer footer footer'" créera trois zones nommées "header", "main", et "footer" pour la première ligne et "aside" pour la deuxième ligne.