Cet utilitaire permet à un élément de s'étendre sur plusieurs colonnes ou de se placer à une colonne spécifique dans la grille.
| Classe |
Styles |
| col-span-<nombre> |
grid-column: span <nombre> / span <nombre>; |
| col-span-full |
grid-column: 1 / -1; |
| col-span-(<propriete-personnalisee>) |
grid-column: span var(<propriete-personnalisee>) / span var(<propriete-personnalisee>); |
| col-span-[<valeur>] |
grid-column: span <valeur> / span <valeur>; |
| col-start-<nombre> |
grid-column-start: <nombre>; |
| -col-start-<nombre> |
grid-column-start: calc(<nombre> * -1); |
| col-start-auto |
grid-column-start: auto; |
| col-start-(<propriete-personnalisee>) |
grid-column-start: var(<propriete-personnalisee>); |
| col-start-[<valeur>] |
grid-column-start: <valeur>; |
| col-end-<nombre> |
grid-column-end: <nombre>; |
| -col-end-<nombre> |
grid-column-end: calc(<nombre> * -1); |
| col-end-auto |
grid-column-end: auto; |
| col-end-(<propriete-personnalisee>) |
grid-column-end: var(<propriete-personnalisee>); |
| col-end-[<valeur>] |
grid-column-end: <valeur>; |
| col-auto |
grid-column: auto; |
| col-<nombre> |
grid-column: <nombre>; |
| -col-<nombre> |
grid-column: calc(<nombre> * -1); |
| col-(<propriete-personnalisee>) |
grid-column: var(<propriete-personnalisee>); |
| col-[<valeur>] |
grid-column: <valeur>; |
