Introduction aux langages HTML et CSS
Nous avons vu qu’il était déjà possible d’utiliser les propriétés float et display: flex pour créer des grilles. Quel est alors l’intérêt du display: grid ?
Le système grid permet en réalité de gérer la grille depuis l’élément parent (le conteneur). D’autre part, il permet également définir à la fois les colonnes et les lignes !
Une fois la propriété display: grid appliquée au conteneur, deux autres propriétés deviennent accessibles :
Elles permettent respectivement de définir les colonnes et les lignes
Syntaxe :
.conteneur {
grid-template-columns: 20% 60% 20%;
grid-template-rows: 100px 150px 100px;
}
Les propriétés gap, column-gap et row-gap permettent d’ajouter un espace entre les colonnes et les lignes
Ces espacements peuvent faire sortir nos “cellules” du cadre. Afin d’éviter cette situation, il est possible d’utiliser les fractions pour la propriété grid-template-columns
Syntaxe :
.conteneur {
grid-template-columns: 1fr 2fr 3fr;
}
Les grilles CSS permettent également de positionner les différents éléments disponibles dans notre conteneur.
Nous disposons alors des propriétés :
Atteindre le niveau 28 de Grid Garden !