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>

Colonnes

Gap (espacement)

Alignement vertical

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>

Exemple concret : dans une grille de 3 colonnes, data-col-span="2" fait qu'un élément prend 2 colonnes sur 3 (les ⅔ de la largeur). data-row-span="2" le fait prendre 2 rangées de hauteur.

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>

Tailles prédéfinies

Pour un contrôle plus fin, utilisez data-col-span et data-row-span directement sur les .bento__item.

Hauteur des lignes

Layouts prédéfinis

Des layouts courants sont disponibles via data-layout :

<!-- 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>

Responsive

Toutes les grilles s'adaptent automatiquement selon 4 breakpoints :

Les spans trop larges pour l'écran sont automatiquement réduits.

Responsive via data attributes

Pour contrôler le nombre de colonnes par breakpoint sans CSS, utilisez les attributs data-cols-tab, data-cols-mob-l et data-cols-mob :

<div class="grid" data-cols="4" data-cols-tab="2" data-cols-mob="1" data-gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Les breakpoints héritent : si data-cols-mob n'est pas défini, il utilise la valeur de data-cols-mob-l, puis data-cols-tab, puis data-cols.

Le créateur de grilles génère automatiquement ces attributs quand vous configurez le responsive.

Responsive personnalisé (CSS)

Pour un contrôle encore plus fin (spans par item, layouts complexes), nommez votre grille et ajoutez des media queries :

<div class="grid grid-services" data-cols="4" data-gap="md">
  <div>Service 1</div>
  <div>Service 2</div>
  <div>Service 3</div>
  <div>Service 4</div>
</div>

<style>
@media (max-width: 991px) {
  .grid-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 478px) {
  .grid-services { grid-template-columns: 1fr; }
}
</style>

Inclure dans une page

<link rel="stylesheet" href="core/css/grid.css">

Aucun JavaScript nécessaire. Tout fonctionne en CSS pur.

Créateur de grilles

Configurez visuellement vos layouts grille et bento, puis copiez le code généré. Le code utilise les attributs data-* du framework et fonctionne immédiatement avec grid.css.

Fonctionnalités

• Deux modes : Grille flexible (nombre de colonnes libre, spans personnalisés) et Bento (tailles prédéfinies, layouts).
• Responsive complet : nommez votre grille pour activer la barre de breakpoints et configurer colonnes et spans par breakpoint.
• Aperçu adaptatif : la preview change de largeur selon le breakpoint sélectionné (Desktop = 100%, Tablette = 768px, Mobile L = 480px, Mobile = 375px).
• Sortie HTML + CSS : le code généré inclut le HTML et, si un nom est défini, le CSS responsive complet avec media queries.

Barre de breakpoints

Dès qu'un nom de grille est renseigné (ex : grid-services), une barre de breakpoints style Webflow apparaît avec 4 niveaux :

Cliquez sur un breakpoint pour configurer le nombre de colonnes et les spans à ce niveau. Les breakpoints inférieurs héritent automatiquement des valeurs du breakpoint supérieur (système de cascade). Un bouton Auto permet de rétablir l'héritage si une valeur a été personnalisée.

Nom de la grille et classes auto

Quand un nom est défini, le créateur génère des classes CSS automatiques pour chaque item :

<!-- Avec nom "grid-services" -->
<div class="grid grid-services" data-cols="4">
  <div class="grid-services__item-1">Contenu 1</div>
  <div class="grid-services__item-2">Contenu 2</div>
  <div class="grid-services__item-3">Contenu 3</div>
  <div class="grid-services__item-4">Contenu 4</div>
</div>

Sans nom, le comportement classique avec data-col-span / data-row-span est utilisé.

CSS responsive généré

Le bloc CSS inclut les media queries complètes :

• Desktop : les spans sont définis en CSS sans media query.
• Breakpoints non-desktop : chaque niveau génère une @media (max-width: ...) avec le grid-template-columns et les spans par item.

/* Exemple de CSS généré */
/* Desktop */
.grid-services__item-1 {
  grid-column: span 2;
}

/* Tablette */
@media (max-width: 991px) {
  .grid-services {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-services__item-1 {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 478px) {
  .grid-services {
    grid-template-columns: 1fr;
  }
}

Utilisation du créateur

1. Choisissez le mode : Grille flexible ou Bento.
2. (Grille) Renseignez un nom de grille pour activer le responsive personnalisé.
3. Configurez les options globales (colonnes, gap, alignement).
4. Si un nom est défini, naviguez entre les breakpoints pour ajuster colonnes et spans.
5. Cliquez sur un item dans l'aperçu pour modifier son col-span et row-span (les valeurs héritées sont signalées par une bordure en pointillés).
6. Copiez le code HTML et le CSS responsive générés.

Ouvrir le constructeur Grilles dans le configurateur →