Système de grille 12 colonnes basé sur Flexbox avec gestion native du
gap. Contrairement au système
.row / .col-*, les colonnes ici intègrent
le gap directement dans leur calcul de largeur via
calc() — pas de padding de gouttière,
pas de marge négative.
1111111111114443638412
Chaque colonne .g-col-{n} soustrait automatiquement
sa part de --grid-gap dans son calcul de largeur via
calc(). La somme des colonnes d'une ligne doit toujours
être égale à 12 pour un alignement parfait.
⚠️ Ne pas ajouter de padding ou de
margin directement sur les colonnes — les gouttières
sont gérées exclusivement par gap sur
.grid.
La règle .grid > * applique
padding-inline et padding-block
via les variables --grid-padding-x et
--grid-padding-y à tout enfant direct,
qu'il porte ou non une classe de colonne. Le min-width: 0
empêche les débordements flex.
| CLASSE | ÉLÉMENT | DESCRIPTION |
|---|---|---|
.grid |
<div> |
Conteneur de grille. Active display: flex,
flex-wrap: wrap et applique
gap: var(--grid-gap) entre les colonnes. |
.g-col |
<div> |
Colonne flexible sans largeur fixe (flex: 1 0 0).
Plusieurs .g-col dans une même grille se partagent
l'espace équitablement. |
.g-col-{1…12} |
<div> |
Colonne de largeur fixe. La largeur est calculée via
calc(n/12 * 100% - gap * (12-n)/12).
Le gap est soustrait proportionnellement pour que la somme reste exactement égale à 100 %. |
.g-col-{1…12}-{bp} |
<div> |
Variante responsive. La largeur ne s'applique qu'à partir du breakpoint spécifié.
En dessous, l'élément hérite du comportement par défaut de .grid > *. |
.g-col répartit l'espace disponible équitablement entre
les colonnes sans largeur définie (flex: 1 0 0).
.g-col.g-col.g-col.g-col.g-col.g-col
Les classes .g-col-{1…12} définissent une largeur en fraction
de 12 avec compensation automatique du gap.
21048663333
Les classes .g-col-{n}-{bp} s'activent uniquement à partir
du breakpoint spécifié via @media (min-width).
En dessous, aucune largeur fixe n'est définie — l'élément se comporte comme un enfant flex standard.
Les variantes responsives utilisent min-width — elles
s'appliquent à partir du breakpoint spécifié et au-delà. Combiner plusieurs suffixes permet de définir
des comportements différents à chaque palier. Les breakpoints disponibles sont ceux définis dans
$breakpoints.
| TOKEN | RÔLE |
|---|---|
--grid-gap |
Espacement entre les colonnes et les lignes. Intégré dans le calcul de largeur de chaque
.g-col-{n} via calc(). |
--grid-padding-x |
Padding horizontal appliqué à chaque enfant direct de .grid
via la règle .grid > *. |
--grid-padding-y |
Padding vertical appliqué à chaque enfant direct de .grid
via la règle .grid > *. |
/* Global variables */
:root {
--grid-gap: 1rem;
--grid-padding-x: 0;
--grid-padding-y: 0;
}
La valeur de --grid-gap est utilisée à la fois comme
espace visuel entre les colonnes et comme facteur de compensation dans le
calc() de chaque colonne. Modifier cette variable
recalcule automatiquement toutes les largeurs — pas besoin d'ajustement manuel.
Toujours s'assurer que la somme des colonnes dans un .grid
est égale à 12. Au-delà, les colonnes excédentaires
passent à la ligne suivante grâce au flex-wrap: wrap.
Les grilles sont imbriquables : une colonne peut contenir un nouveau
.grid avec ses propres colonnes.
Le --grid-gap s'applique indépendamment
à chaque niveau d'imbrication.
Ne pas ajouter de margin sur les colonnes
.g-col-{n} — cela rompt le calcul de largeur
basé sur --grid-gap et provoque des débordements.
Utiliser --grid-padding-x /
--grid-padding-y pour les espacements internes.
Ne pas mélanger .g-col (flexible) et
.g-col-{n} (largeur fixe avec compensation gap)
dans la même ligne sans en maîtriser l'effet — le calcul de compensation du gap ne s'applique
pas sur .g-col.
Grid · WEBDEV-UI DOCS / V1