Grid / Bento
Système de grille flexible et layouts bento via classes CSS et attributs data-*. Responsive par défaut, zéro dépendance.
Grille simple
Ajoutez la classe grid et définissez le nombre de colonnes avec data-cols :
<div class="grid" data-cols="3" data-gap="md">
<div>Colonne 1</div>
<div>Colonne 2</div>
<div>Colonne 3</div>
</div>1
2
3
Colonnes
| Attribut / Classe | Colonnes |
|---|---|
data-cols="1" ou grid--1 | 1 colonne |
data-cols="2" ou grid--2 | 2 colonnes |
data-cols="3" ou grid--3 | 3 colonnes |
data-cols="4" ou grid--4 | 4 colonnes |
data-cols="5" ou grid--5 | 5 colonnes |
data-cols="6" ou grid--6 | 6 colonnes |
Gap (espacement)
| Attribut / Classe | Espacement |
|---|---|
data-gap="none" ou grid--gap-none | 0 |
data-gap="xs" ou grid--gap-xs | var(--space-2) |
data-gap="sm" ou grid--gap-sm | var(--space-4) |
data-gap="md" ou grid--gap-md | var(--space-6) — défaut |
data-gap="lg" ou grid--gap-lg | var(--space-8) |
data-gap="xl" ou grid--gap-xl | var(--space-12) |
Alignement vertical
| Attribut | Effet |
|---|---|
data-align="start" | Aligné en haut |
data-align="center" | Centré verticalement |
data-align="end" | Aligné en bas |
data-align="stretch" | Étiré (défaut) |
Span (items)
Un élément enfant peut occuper plusieurs colonnes ou lignes :
<div class="grid" data-cols="3">
<div data-col-span="2">Je prends 2 colonnes</div>
<div>1 colonne</div>
<div data-col-span="full">Toute la largeur</div>
</div>Span 2
1
Full width
| Attribut | Effet |
|---|---|
data-col-span="2" à "6" | Occupe N colonnes |
data-col-span="full" | Toute la largeur |
data-row-span="2" à "4" | Occupe N lignes |
Bento
Le système bento est une grille 4 colonnes avec des tailles prédéfinies pour créer des layouts asymétriques rapidement :
<div class="bento" data-gap="md">
<div class="bento__item" data-size="large">Grande carte</div>
<div class="bento__item">Normal</div>
<div class="bento__item">Normal</div>
<div class="bento__item" data-size="wide">Large</div>
<div class="bento__item" data-size="tall">Haute</div>
<div class="bento__item">Normal</div>
</div>Large
Normal
Normal
Wide
Tall
Normal
Tailles prédéfinies
| Attribut | Effet |
|---|---|
| (aucun) | 1 colonne, 1 ligne |
data-size="wide" | 2 colonnes, 1 ligne |
data-size="tall" | 1 colonne, 2 lignes |
data-size="large" | 2 colonnes, 2 lignes |
data-size="full" | Toute la largeur |
Pour un contrôle plus fin, utilisez data-col-span et data-row-span directement sur les .bento__item.
Hauteur des lignes
| Attribut | Hauteur minimum |
|---|---|
data-row-height="sm" | 120px |
data-row-height="md" | 180px (défaut) |
data-row-height="lg" | 240px |
data-row-height="xl" | 320px |
Layouts prédéfinis
Des layouts courants sont disponibles via data-layout :
| Layout | Description |
|---|---|
data-layout="sidebar" | 2/3 + 1/3 (contenu + sidebar droite) |
data-layout="sidebar-left" | 1/3 + 2/3 (sidebar gauche + contenu) |
data-layout="feature" | 1 grande carte à gauche + 2 petites empilées à droite |
<!-- Layout feature : 1 grande + 2 petites -->
<div class="bento" data-layout="feature" data-gap="md">
<div class="bento__item">Mise en avant</div>
<div class="bento__item">Détail 1</div>
<div class="bento__item">Détail 2</div>
</div>Mise en avant
Détail 1
Détail 2
Responsive
Toutes les grilles s'adaptent automatiquement :
- ≤ 1024px : 5-6 colonnes → 3, bento → 3 colonnes
- ≤ 768px : 3-6 colonnes → 2, bento → 2 colonnes, layouts prédéfinis → 1 colonne
- ≤ 480px : tout passe en 1 colonne
Les spans trop larges pour l'écran sont automatiquement réduits.
Inclure dans une page
<link rel="stylesheet" href="core/css/grid.css">Aucun JavaScript nécessaire. Tout fonctionne en CSS pur.