CSS Espace entre les grilles

Espaces entre les grilles CSS

L'espace entre les lignes et les colonnes dans un conteneur de grille s'appelle espaces (ou gouttières ).

Les espaces sont créés entre les lignes et les colonnes de la grille, et non sur les bords extérieurs du conteneur de grille.

La taille par défaut de l'espace est de 0, ce qui signifie qu'il n'y a pas d'espacement entre les éléments de la grille.

La taille de l'espace peut être ajustée avec les propriétés suivantes :

La propriété column-gap spécifie l'espace entre les colonnes dans une grille.

Spécifiez un espace de 50 pixels entre les colonnes de la grille :

 .container { 
 display: grid; 
   column-gap: 50px; 
 } 

Résultat :

La propriété row-gap spécifie l'espace entre les lignes dans une grille.

Spécifiez un espace de 50 pixels entre les lignes de la grille :

 .container { 
 display: grid; 
   row-gap: 50px;  
  } 

Résultat :

La propriété gap est une propriété abrégée pour row-gap et column-gap .

Si une seule valeur est fournie, elle applique le même espace aux lignes et aux colonnes.

Si deux valeurs sont fournies, la première valeur définit le row-gap , et la deuxième valeur définit le column-gap .

En utilisant une valeur - Définir l'espace entre les lignes et les colonnes à 50px :

 .container { 
 display: grid; 
   gap: 50px;  
  } 

Résultat :

En utilisant deux valeurs - Définir l'espace entre les lignes à 30px et l'espace entre les colonnes à 100px :

 .container { 
 display: grid; 
   gap: 30px 100px;  
  } 

Résultat :

Propriété	Description
column-gap	Spécifie l'espace entre les colonnes de la grille
gap	Propriété abrégée pour row-gap et column-gap
row-gap	Spécifie l'espace entre les lignes de la grille