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>

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 personnalisé

Pour un contrôle fin du nombre de colonnes par breakpoint, nommez votre grille avec une classe CSS et ajoutez des media queries dans votre feuille de style :

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

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

Le créateur de grilles ci-dessous génère automatiquement ce CSS quand vous configurez le responsive.

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.