Définition de la CSS grid-column.
La propriété de Grid CSS grid-column
est raccourci qui permet de spécifier la position de début et de fin de colonne d'un élément au sein de son conteneur Grid Css.
grid-column
:grid-column : auto;
grid-column : auto / 2;
grid-column : 1 / 2;
grid-column : Identifiant / Identifiant;
grid-column : span 3 / 4;
grid-column : 4;
grid-column
CSS peut prendre une valeur de chaque propriété de Grid Css suivante :-
grid-column-start
: spécifie la position du début de la colonne de l'élément. -
grid-column-end
: spécifie la position de la fin de la colonne de l'élément.
grid-column
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.
Exemple de code grid-column
CSS
Conditions d'application de la CSS grid-column.
La propriété de feuille de style grid-column
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-column.
Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style grid-column
.
Conditions d'animation de grid-column en CSS3.
La CSS grid-column
est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.
Propriétés CSS utilisées dans le raccourci grid-column.
Spécifier les propriétés de la colonne individuellement
Si vous ne voulez pas utiliser le raccourci de Grid Css grid-column
, vous pouvez définir individuellement chaque propriété Css de la début ou fin de colonne Css d'un élément en utilisant une des propriétés de Grid CSS suivante :
-
grid-column-start
: définie le début de la colonne. -
grid-column-end
: définie la fin de la colonne.
.identifiant{
grid-column-start : 1;
grid-column-end : 2;
}
Règles de syntaxes CSS pour grid-column.
Règle d'écriture de grid-column
Les valeurs assignées à la propriété de Grid CSS grid-column
doivent être séparées par un slash (/) et l'ordre a de l'importance.
grid-column : grid-column-start / grid-column-end
Vous pouvez mettre qu'une valeur, dans ce cas :
- si la valeur que vous avez mise est un
Identifiant
, alors ce dernier est aussi appliqué à la propriété de Grille Cssgrid-column-end
. - sinon, c'est cela revient à préciser un
grid-column-end
àauto
Compatibilités navigateurs de la propriété grid-column
- Détails des versions de la CSS grid-column
- Propriété
grid-column
est compatible avec CSS3 et plus.
Votre avis sur la définition grid-column en CSS
Votez pour la définition CSS grid-column
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 5 / 5 - 1
vote
Cliquez sur une étoile pour voter.