Minmax() dans GRID : définition et exemple

Bonjour,

Je n'ai pas trouvé de titre adapté pour ce petit problème illustré par ce codepen.

La colonne GAUCHE doit faire 20rem de large et devenir plus étroite si nécessaire.

La colonne DROITE occupe tout l'espace restant avec une largeur minimale de 20rem.

Autrement dit, si fenêtre de 30rem, GAUCHE sera 10rem et droite 20rem.

Cela fonctionne avec les déclarations du codepen.

Par contre, si le contenu de GAUCHE n'est pas assez large, la colonne fait moins de 20rem de large.
C'est la cas dans la deuxième DIV du codepen.

L'objectif est, si la fenêtre est assez large, d'avoir 20rem pour GAUCHE dans deuxième DIV,
Tout ayant la largeur de 10rem si la fenêtre est réduite à 30rem.

J'espère que l'énoncé est clair...
Modifié par boteha_2 (30 Apr 2026 - 19:39)

Salut,

Ce que j'ai compris, ça donne quelque chose comme :

div {
  display: grid;
  /* deux colonnes */
  /* La 1ère : idéale à 20rem, mais peut descendre à 0 (ou ce qu'il reste) */
  /* La 2e : prend tout le reste (1fr), avec un minimum de 20rem */
  grid-template-columns: minmax(0, 20rem) minmax(20rem, 1fr);
  column-gap: 2rem;
  align-items: start;
}

/* nettoie les anciennes propriétés pour éviter les conflits */
p:first-child { 
  width: 100%; /* Force le paragraphe à occuper toute sa cellule de grille */
}

Modifié par Niuxe (30 Apr 2026 - 13:40)

Bonjour Niuxe,

Tu as bien compris, merci beaucoup, voilà le nouveau codepen.

Je me risque à une définition de minmax() plus claire pour moi et sans doute quelques autres.

minmax() : définit une largeur de piste variable, avec un minimum et un maximum.

Je corrige le titre de la discussion en conséquence et comme d'habitude j'attends un peu avant de cocher Résolu.