repeat() et minmax() en CSS : des grilles responsives sans media query

Écrire une grille de douze colonnes égales à la main, colonne par colonne, ou une grille de cartes dont la largeur doit rester entre 200 et 300 pixels quel que soit le nombre de cartes affichées, devient vite pénible sans un moyen de générer ce motif automatiquement. repeat() et minmax() servent exactement à ça : la première évite de répéter une valeur, la seconde donne une fourchette de tailles au lieu d'une valeur fixe.

Combinées ensemble, et souvent avec auto-fit et auto-fill, ces deux fonctions permettent de construire des grilles responsives sans écrire la moindre Media query, ce qui en fait l'un des outils les plus utilisés de Grid au quotidien.

Définition

repeat() répète un motif de colonnes ou de lignes un certain nombre de fois dans grid-template-columns, pour éviter de l'écrire à la main. minmax() fixe une taille minimale et une taille maximale pour une colonne ou une ligne, qui varie librement entre ces deux bornes selon l'espace disponible. Utilisées seules ou ensemble, elles réduisent une déclaration qui pourrait faire une ligne entière de valeurs répétées à une syntaxe courte et lisible.

repeat() seul

.grille {
  grid-template-columns: repeat(4, 1fr);
}

repeat(4, 1fr) équivaut exactement à écrire 1fr quatre fois de suite. Le premier argument fixe le nombre de répétitions, le second le motif à répéter, qui peut lui-même contenir plusieurs valeurs : repeat(2, 100px 1fr) répète le couple 100px 1fr deux fois, ce qui donne quatre colonnes en tout.

minmax() seul

.grille {
  grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
}

Ici, la première colonne ne descend jamais sous 200 pixels, même si le conteneur devient très étroit, mais peut grandir comme n'importe quelle colonne en unité fr si l'espace le permet. C'est un moyen simple d'éviter qu'une colonne contenant un logo ou un bouton ne devienne trop étroite pour être lisible.

La combinaison qui construit une grille responsive

.grille {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

Cette ligne unique crée une grille de cartes qui ajoute ou retire des colonnes toute seule selon la largeur de l'écran, sans qu'aucune media query ne soit nécessaire pour passer de quatre colonnes sur un grand écran à une seule sur mobile.

Le choix entre auto-fit et auto-fill à l'intérieur de repeat() change ce qui arrive aux colonnes vides une fois le nombre maximal de colonnes atteint, une nuance détaillée dans le terme dédié à ces deux mots-clés. Un piège voisin touche minmax(0, 1fr) : remplacer le minimum par 0 empêche un contenu comme une image de forcer la colonne à s'agrandir au-delà de ce que la grille avait prévu, un réglage utile quand une grille de cartes contient des images qui ne doivent jamais élargir leur colonne au-delà des autres.

Le piège du second argument trop rigide

minmax() ne fonctionne comme prévu dans une grille responsive que si son second argument reste flexible, en fr ou en pourcentage. Un minmax(220px, 300px) fige toujours la colonne entre deux valeurs fixes, ce qui empêche la grille de vraiment s'étirer pour combler l'espace restant.

Questions fréquentes

Non, c'est l'inverse qui fonctionne : minmax() se place comme argument à l'intérieur de repeat(), jamais le contraire. repeat() décrit combien de fois répéter un motif, et minmax() peut faire partie de ce motif, comme dans repeat(3, minmax(100px, 1fr)).

Le navigateur traite le minimum comme prioritaire et ignore le maximum dans ce cas précis, pour éviter qu'une colonne se retrouve avec une taille impossible à respecter. Ce cas reste rare en pratique et signale presque toujours une valeur mal choisie à corriger plutôt qu'un comportement à exploiter.

Oui, repeat() et minmax() s'utilisent exactement de la même façon pour les lignes que pour les colonnes. On les retrouve par exemple dans grid-template-rows: repeat(3, minmax(100px, auto)) pour trois lignes qui ne descendent jamais sous 100 pixels tout en pouvant grandir avec leur contenu.