grid-area CSS propriété

Définition de la CSS grid-area.

La propriété de Grid CSS grid-area est raccourci qui permet de spécifier la position de début et de fin de colonne et la position de début et de fin de ligne d'un élément au sein de son conteneur Grid Css.

Exemple de syntaxe CSS grid-area :
grid-area : auto;
grid-area : 1 / 2 / 3 / 4;
grid-area : 1 / 2 / 3 ;
grid-area : Identifiant / Identifiant / 2;
grid-area : Identifiant ;
grid-area : 4;
La propriété de feuille de style grid-area CSS peut prendre une valeur de chaque propriété de Grid Css suivante :
  • : spécifie la position du début de la ligne de l'élément.
  • : spécifie la position du début de la colonne de l'élément.
  • : spécifie la position de la fin de la ligne de l'élément.
  • : spécifie la position de la fin de la colonne de l'élément.
La propriété de feuille de style grid-area CSS peut prendre la valeur seule de :
  • auto : met à auto l'ensemble des propriétés Css de Grille citées ci-dessus. Valeur par défaut.

Conditions d'application de la CSS grid-area.

La propriété de feuille de style grid-area CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont un élément "Item Grid" d'un conteneur Grid de type display:[inline-]grid.

Héritage des valeurs Css de grid-area.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style grid-area.

Règles de syntaxes CSS pour grid-area.

Règle d'écriture de la Css grid-area

Les valeurs assignées à la propriété de Grid CSS grid-area doivent être séparées par un slash (/).

Si vous mettez quatre valeurs, elles correspondent dans l'ordre à :

Exemple d'écriture de grid-area Css : 
grid-area : 1 / 2 / 3 / 4 ;

Si vous mettez trois valeurs, elles correspondent dans l'ordre à :

  • grid-row-start.
  • grid-column-start.
  • grid-row-end.
Dans ce cas grid-column-end a la valeur d'auto, ou prend la valeur de grid-column-start si cette dernière à la valeur d'un identifiant.

Exemple d'écriture de grid-area Css : 
grid-area : 1 / 2 / 3 ;

Si vous mettez deux valeurs, elles correspondent dans l'ordre à :

  • grid-row-start.
  • grid-column-start.
Dans ce cas grid-row-end a la valeur d'auto, ou prend la valeur de grid-row-start si cette dernière à la valeur d'un identifiant.
Dans ce cas grid-column-end a la valeur d'auto, ou prend la valeur de grid-column-start si cette dernière à la valeur d'un identifiant.

Exemple d'écriture de grid-area Css : 
grid-area : 1 / 2;

Si vous mettez une valeur, elle correspond dans l'ordre à :

  • grid-row-start.

Dans ce cas les autres propriétés Css ont la valeur d'auto, ou prennent la valeur de grid-row-start si cette dernière à la valeur d'un identifiant.

Exemple d'écriture de grid-area Css : 
grid-area : 1;

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

Spécifier les propriétés de positions individuellement

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

  • : spécifie la position du début de la ligne de l'élément.
  • : spécifie la position de la fin de la ligne de l'élément.
  • : spécifie la position du début de la colonne de l'élément.
  • : spécifie la position de la fin de la colonne de l'élément.
Exemple d'écriture CSS de propriétés de positions spécifiées individuellement :
.identifiant{
  grid-row-star : 1;
  grid-row-end : 2; 
  grid-column-start : 1; 
  grid-column-end : 3; 
}

Compatibilités navigateurs de la propriété grid-area

Détails des versions de la CSS grid-area
Résumé du support navigateurs de la CSS grid-area

Votre avis sur la définition grid-area en CSS

Votez pour la définition CSS grid-area

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/grid-area-css.html Votes: 3 / 5 - 2 votes
Cliquez sur une étoile pour voter.