grid CSS propriété

grid : none;
grid : 1fr 1fr / 1fr 2fr;
grid : 'a b b' auto 'a c d' 50px / auto 100px auto;
grid : 1fr 2fr / auto-flow dense 3fr;
grid : auto-flow dense 3fr / 1fr 2fr;

Propriétés CSS utilisées dans le raccourci grid.

Spécifier les propriétés individuellement

Si vous ne voulez pas utiliser le raccourci de Grid Css grid, vous pouvez définir individuellement chaque propriété Css d'un élément en utilisant une des propriétés de Grid CSS suivante :

• grid-template-rows : spécifie la taille de chaque ligne de la grille Css et implicitement le nombre de lignes de l'élément conteneur Grid Css.
• grid-template-columns : spécifie la taille de chaque colonne de la grille Css et implicitement le nombre de colonnes de l'élément conteneur Grid Css.
• grid-auto-flow : spécifie la manière dont doit être placé les "Grid item" qui ne sont pas explicitement placés de l'élément conteneur Grid Css.
• grid-auto-rows : spécifie la taille par défaut de chaque ligne de la grille de l'élément conteneur Grid Css.
• grid-auto-columns : spécifie la taille par défaut de chaque colonne de la grille de l'élément conteneur Grid Css.
• grid-template-areas: spécifie une grille explicite en spécifiant un identifiant à chaque colonne d'une ligne de grille de l'élément conteneur Grid Css.

Règles de syntaxes CSS pour grid.

Règle d'écriture de grid

Quand vous utilisez la propriété Css grid, vous redéfinissez obligatoirement les propriétés Css de Grid suivante:
grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow.

Ecriture de grid-auto-flow au sein de la propriété de Grille Css grid.
Lorsque vous devez préciser grid-auto-flow dans la déclaration de grid, vous devez utiliser deux mots clés :

• auto-flow : selon sa position dans la déclaration, cela équivaut à row ou column de la propriété CSS grid-auto-flow
• dense : non obligatoire, à la même signification que pour la propriété CSS grid-auto-flow

Les combinaisons de propriétés Css de Grid

La combinaison grid-template-columns / grid-template-columns :

grid : 1fr 1fr / 1fr 2fr;

/* Revient à définir les propriétés CSS suivantes : */
grid-template-rows : 1fr 1fr;
grid-template-columns : 1fr 2fr;
grid-template-areas : none;
grid-auto-rows : auto;
grid-auto-columns : auto;
grid-auto-flow : row;

La combinaison grid-template-rows / grid-auto-flow grid-auto-columns :

grid : 1fr 2fr / auto-flow dense 3fr ;

/* Revient à définir les propriétés CSS suivantes : */
grid-template-rows: 1fr 2fr;
grid-template-columns: none;
grid-template-areas: none;
grid-auto-rows: auto;
grid-auto-columns: 3fr;
grid-auto-flow: column dense;

La combinaison grid-template-rows / grid-auto-columns :

grid : 1fr 2fr / auto-flow 3fr ;

/* Revient à définir les propriétés CSS suivantes : */
grid-template-rows : 1fr 2fr;
grid-template-columns : none;
grid-template-areas : none;
grid-auto-rows : auto;
grid-auto-columns : 3fr;
grid-auto-flow : column;

La combinaison grid-auto-flow grid-auto-rows / grid-template-columns :

grid : auto-flow dense 3fr / 1fr 2fr;

/* Revient à définir les propriétés CSS suivantes : */
grid-template-rows : none;
grid-template-columns : 1fr 2fr;
grid-template-areas : none;
grid-auto-rows : 3fr;
grid-auto-columns : auto;
grid-auto-flow : dense;

La combinaison grid-auto-rows / grid-template-columns :

grid : auto-flow 3fr / 1fr 2fr;

/* Revient à définir les propriétés CSS suivantes : */
grid-template-rows : none;
grid-template-columns : 1fr 2fr;
grid-template-areas : none;
grid-auto-rows : 3fr;
grid-auto-columns : auto;
grid-auto-flow : row;

Compatibilités navigateurs de la propriété grid

Votre avis sur la définition grid en CSS