CSS Éléments de grille
Éléments de grille CSS
Un conteneur de grille contient un ou plusieurs éléments de grille.
Tous les éléments enfants directs d'un conteneur de grille deviennent automatiquement des éléments de grille.
Ci-dessous se trouve un conteneur de grille avec cinq éléments :
Dimensionnement/étendue des éléments de grille CSS
Un élément de grille peut s'étendre sur plusieurs colonnes ou lignes.
Nous pouvons spécifier où commencer et finir un élément de grille en utilisant les propriétés suivantes :
-
grid-column-start- Spécifie sur quelle ligne de colonne l'élément de grille commencera -
grid-column-end- Spécifie sur quelle ligne de colonne l'élément de grille se terminera -
grid-column- Propriété abrégée pourgrid-column-startetgrid-column-end -
grid-row-start- Spécifie sur quelle ligne de rangée l'élément de grille commencera -
grid-row-end- Spécifie sur quelle ligne de rangée l'élément de grille se terminera -
grid-row- Propriété abrégée pourgrid-row-startetgrid-row-end
Les lignes entre les colonnes dans une grille sont appelées lignes de colonne , et les lignes entre les rangées dans une grille sont appelées lignes de rangée .
Nous pouvons nous référer aux numéros de ligne lors du placement d'un élément de grille dans un conteneur de grille.
grid-column-start et grid-column-end CSS
La propriété grid-column-start spécifie sur quelle ligne de colonne l'élément de grille commencera.
La propriété grid-column-end spécifie sur quelle ligne de colonne l'élément de grille se terminera.
Exemple
Laissez le premier élément de grille commencer à la ligne de colonne 1 et se terminer à la ligne de colonne 3 :
.item1 {
grid-column-start: 1;
grid-column-end: 3;
} Résultat :
La propriété grid-column CSS
La propriété grid-column est une propriété abrégée pour grid-column-start et grid-column-end .
Exemple
Laissez le premier élément de grille commencer à la ligne de colonne 1 et laissez-le s'étendre sur 2 colonnes :
.item1 {
grid-column: 1 / span 2;
} Résultat :
grid-row-start et grid-row-end CSS
La propriété grid-row-start spécifie sur quelle ligne de rangée l'élément de grille commencera.
La propriété grid-row-end spécifie sur quelle ligne de rangée l'élément de grille se terminera.
Exemple
Laissez le premier élément de grille commencer à la ligne de rangée 1 et se terminer à la ligne de rangée 3 :
.item1 {
grid-row-start: 1;
grid-row-end: 3;
} Résultat :
La propriété grid-row CSS
La propriété grid-row est une propriété abrégée pour grid-row-start et grid-row-end .
Exemple
Laissez le premier élément de grille commencer à la ligne de rangée 1 et laissez-le s'étendre sur 2 rangées :
.item1 {
grid-row: 1 / span 2;
} Résultat :
Combiner grid-column et grid-row
Ici, nous utilisons à la fois les propriétés grid-column et grid-row pour permettre à un élément de grille de s'étendre à la fois sur les colonnes et les rangées.
Exemple
Laissez le premier élément de grille commencer à la ligne de colonne 1, et laissez-le s'étendre sur 2 colonnes, laissez également le premier élément de grille commencer à la ligne de rangée 1, et laissez-le s'étendre sur 2 rangées :
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
} Résultat :
Toutes les propriétés des éléments de grille CSS
| Propriété | Description |
|---|---|
| align-self | Aligne le contenu d'un élément de grille spécifique le long de l'axe des colonnes |
| grid-area | Propriété abrégée pour grid-row-start, grid-column-start , grid-row-end et grid-column-end |
| grid-column | Propriété abrégée pour grid-column-start et grid-column-end |
| grid-column-end | Spécifie où se termine l'élément de grille |
| grid-column-start | Spécifie où commence l'élément de grille |
| grid-row | Propriété abrégée pour grid-row-start et grid-row-end |
| grid-row-end | Spécifie où se termine l'élément de grille |
| grid-row-start | Spécifie où commence l'élément de grille |
| justify-self | Aligne le contenu d'un élément de grille spécifique le long de l'axe des rangées |
| place-self | Propriété abrégée pour align-self et justify-self |