Grille adaptative

Cette grille adaptative est idéale pour présenter une liste de fiches comme des articles, des catégories, ou des produits sur plusieurs colonnes. Le nombre de colonnes s’ajuste selon la taille de l’écran, des trois colonnes sur un grand écran à une seule sur mobile. La grille utilise le grid layout en CSS.

L’avantage d’utiliser le grid layout est qu’il n’est pas nécessaire d’englober les rangées dans un élément de bloc, ce qui est pratique lorsque les fiches sont obtenus depuis un serveur. Le code HTML est très simple: un élément de bloc parent de classe .grille contient plusieurs éléments de bloc enfants.

<div class="grille">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Le code CSS applique le grid layout à la classe .grille.

.grille {
  display: grid; 
  gap: 0.75rem; /* Optionnel: détermine l'espacement entre les éléments de la grille */
  grid-auto-rows: auto; /* Optionnel: s'assure que les éléments affichés sur une même rangée soient de la même hauteur */
}

@media only screen and (min-width: 768px) { /* Deux colonnes pour les écrans de 768px ou plus */ 
  .grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (min-width: 992px) { /* Trois colonnes si l'affichage est de 992px ou plus */ 
  .grille {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Par défaut, la grille n’affiche qu’une seule colonne, selon le principe du mobile d’abord (mobile first). Les media queries (ces blocs débutant par @media only screen) permettent d’ajouter des colonnes en fonction de la largeur de la fenêtre du navigateur, selon des points de rupture (breakpoints). Il y a deux points de rupture fournis: à 768px ou plus la grille aura deux colonnes et à 992px ou plus la grille aura trois colonnes. Pour ajouter ou enlever des colonnes selon d’autres points de rupture, il suffit d’ajouter ou d’enlever un bloc media query, du plus petit au plus grand.

De plus, la propriété gap de la classe .grille détermine l’espacement entre les éléments de la grille. Vous pouvez la modifier ou la retirer selon vos besoins.

Démonstration

Pour prévisualiser sur une page complète: Démonstration.

See the Pen Grille adaptative simple by Jean-Luc Montreuil (@cssactif) on CodePen.

Compatibilité

  • Chrome
    • 66+
  • Firefox
    • 61+1
  • Edge
    • 16+
  • Internet Explorer
    • Non
  • Safari
    • 3.1+
  • Chrome sur Android
    • 92
  • Safari sur iOS
    • 12+

Données de compatibilité par Can I Use?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *