Espace avec column-gap, row-gap & gap¶
Les propriétés column-gap, row-gap et gap permettent de définir des espaces entre les cellules d'une grille. Ces propriétés acceptent toutes les unités de base.
column-gap¶
La propriété column-gap permet de définir l'espace entre les
colonnes d'une grille.
See the Pen Grid - column-gap by TIM Montmorency (@tim-momo) on CodePen.
En savoir plus sur column-gaprow-gap¶
La propriété row-gap permet de définir l'espace entre les rangées
d'une grille.
See the Pen Grid - row-gap by TIM Montmorency (@tim-momo) on CodePen.
gap¶
La propriété gap permet de définir simultanément l'espace entre
les colonnes et les rangées.
Cette propriété accepte aussi de recevoir deux valeurs. Le cas échéant, la première correspond à l'espace entre les rangées et la deuxième, à celle entre les colonnes.
Exemple :
gap: 10px 50px;
Génère un espace de 10px entre les rangées ↕️ et de 50px entre les colonnes ↔️.
Warning
Pratiquement toutes les unités, sauf les fr, peuvent être utilisées pour les propriétés de type gap.
Inspecteur¶
L'inspecteur est d'une aide précieuse lorsque l'on manipule des éléments en grid.
- Dans le DOM Tree, les éléments en
display: grid;oudisplay: inline-grid;sont mis en évidence grâce à un badge contenant le mot "grid". - Lorsque cliqué, ce badge met en surbrillance les divisions constituant la grille en question.
- Dans l'onglet Layout, il est possible d'afficher des informations supplémentaires : étendre les divisions afin de les rendre plus visibles, afficher la taille des colonnes et rangées, etc.