Le module Grid Layout permet d’utiliser des fonctions CSS pour faciliter la création de grilles responsives:

  • repeat() : pour éviter de devoir se répéter dans le code.
  • auto-fit : pour ne pas spécifier le nombre de rangées ou colonnes, qui s’adaptera selon les contenus.
  • minmax() : unité de mesure souple, permet de définir un minimum et maximum.

La fonction repeat()

Au lieu de répéter les unités des colonnes, on peut faire usage de cette fonction. Ainsi, ce code:

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

est équivalent à ceci :

.container {
  grid-template-columns: repeat(6, 1fr);
}

La première valeur donne le nombre de colonnes à créer, la deuxième la largeur.

auto-fit et auto-fill

Il y a encore mieux: on peut décider que le nombre de colonnes s’adapte selon la largeur de l’écran. Au lieu d’indiquer un chiffre, on utilisera le mot-clé auto-fit (ou auto-fill).

Exemple:

.container {
  grid-template-columns: repeat(auto-fit, 250px);
}

Voir sur Codepen: https://codepen.io/eracom/pen/yLXjxbP?editors=1100

Tailles flexibles avec minmax()

C’est pas mal… mais il y a encore mieux: on peut rendre la largeur des boîtes flexible avec minmax(). On définit un minimum et un maximum.

.container {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

See the Pen repeat, autofill et minmax by Manuel Schmalstieg (@eracom) on CodePen.

grid-auto-flow : dense

Dernière astuce: on peut demander à l’algorithme de placement automatique d’utiliser une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille, en changeant l’ordre des éléments si nécessaire.

Il faut ajouter cette déclaration sur le conteneur:

.container {
  grid-auto-flow : dense;
}

Voilà! Avec cette technique, vous pouvez définir des grilles qui s’adapteront de manière très flexible à l’espace disponible.

Exercice

Produire une grille d’images, avec les nouvelles fonctionnalités – repeat, auto-fit, minmax. L’objectif est de créer une grille avec des images en format horizontal et vertical, avec aussi peu de lignes CSS que possible.

Voici un début de code HTML, qu’il s’agit de transformer en grille:

See the Pen Grid Gallery by Manuel Schmalstieg (@eracom) on CodePen.