Système de grille 12 colonnes basé sur Flexbox. Chaque enfant direct de .row
occupe par défaut 100 % de la largeur. Les classes .col-{n}
et leurs variantes responsives permettent de définir précisément la largeur de chaque colonne.
1111111111114443638412
La somme des colonnes dans une même .row doit être égale
à
12 pour remplir exactement la ligne. Au-delà de 12, les
colonnes
excédentaires passent à la ligne suivante grâce au flex-wrap:
wrap
du .row.
La règle .row > * applique width: 100%
et les paddings via --col-padding-x et --col-padding-y
à tout enfant direct de .row, qu'il porte ou non une classe
de colonne.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.row |
<div> |
Conteneur de ligne. Active display: flex et flex-wrap: wrap.
|
.col |
<div> |
Colonne flexible. S'étend pour occuper l'espace disponible (flex:
1 1 0). Plusieurs .col dans une même ligne
se partagent l'espace équitablement.
|
.col-auto |
<div> |
Colonne dont la largeur s'adapte à son contenu (flex: 0 0
auto; width: auto).
|
.col-{1…12} |
<div> |
Colonne de largeur fixe. La largeur est calculée en pourcentage : n / 12 × 100%. Exemple : .col-6 = 50 %.
|
.col-{1…12}-{bp} |
<div> |
Variante responsive. La largeur ne s'applique qu'à partir du breakpoint spécifié (min-width). En dessous, l'élément occupe 100 % de la
largeur.
|
.col répartit automatiquement l'espace disponible entre les
colonnes.
Toutes les colonnes .col d'une même ligne ont la même
largeur.
.col.col.col.col.col.col
.col-auto prend uniquement la largeur nécessaire à son
contenu.
Les autres colonnes de la ligne se partagent l'espace restant.
.col.col-auto (contenu).col
Les classes .col-{1…12} définissent une largeur en fraction
de 12.
La somme des colonnes d'une ligne peut dépasser 12 — les éléments excédentaires passent automatiquement à la
ligne suivante.
col-2col-10col-4col-8col-6col-6col-3col-3col-3col-3
Les classes .col-{n}-{bp} s'activent uniquement à partir du
breakpoint
spécifié via une @media (min-width). En dessous du
breakpoint,
l'élément occupe 100% de la largeur (comportement
mobile-first).
Les classes responsives utilisent min-width : elles
s'appliquent
à partir du breakpoint spécifié et au-delà. En dessous, aucune largeur fixe n'est définie — l'élément
hérite du width: 100% posé par .row > *.
Il est possible de cumuler plusieurs classes responsives sur un même élément :
.col-6-sm et .col-4-lg
par exemple. La classe du breakpoint le plus large prend le dessus à partir de sa valeur de min-width.
Les breakpoints disponibles sont ceux définis dans $breakpoints.
| TOKEN | RÔLE |
|---|---|
--col-padding-x |
Padding horizontal appliqué à chaque enfant direct de .row via la règle .row > *.
|
--col-padding-y |
Padding vertical appliqué à chaque enfant direct de .row via la règle .row > *.
|
/* Global variables */
:root {
--col-padding-x:
0.75rem;
--col-padding-y:
0;
}
Toujours placer les colonnes en enfants directs de .row.
La règle .row > * cible uniquement les enfants directs
pour appliquer les paddings et la largeur par défaut.
Les grilles sont imbriquables : une colonne peut contenir une nouvelle .row
avec ses propres colonnes. Les paddings sont alors cumulés — ajuster --col-padding-x
si nécessaire sur la .row imbriquée.
Ne pas mélanger .col (flexible) et .col-{n}
(largeur fixe) dans la même ligne sans en maîtriser l'effet : .col
occupera tout l'espace restant après les colonnes fixes.
Ne pas poser de width, flex-basis
ou flex manuellement sur une colonne qui porte déjà une
classe
.col-{n} ou .col : cela écrase
les valeurs générées par le SCSS.
Grid · WEBDEV-UI DOCS / V1