Appliquer max-content à la hauteur des grid items

Bonjour,

Je fais suite à cette discussion.

Avec ce codepen j'ai deux problèmes.

Les cartouches sont en format vertical, elles passent en format horizontal si la fenêtre fait moins de 1000px de large.

Si moins de 768px de large la mise en page générale passe sur une seule colonne.

1) En format vertical il faut que les cartouches aient toutes la même hauteur quel que soit le nombre de lignes.
J'y arrive en donnant des dimensions exactes :

div#ced > ul > li {display: grid; grid-template-rows: 1.25rem 16.9rem}

Mais j'aimerais avoir une hauteur fixe sans spécifier des valeurs précises.

J'ai essayé :

div#ced > ul {grid-template-rows: max-content}

Mais cela ne marche pas du tout.

2) Quand moins de 768px, je veux que les cartouches occupent toute la largeur de l'écran.

La largeur est limitée à celle du contenu.

Si vous pouvez m'aider sur ces deux points je vous remercie par avance.

Des hauteurs identiques, ce serait plutôt le rôle des flex-box.
En gérant bien les différentes propriétés des flex, tu devrais avoir quelque chose de responsive.

div#ced > ul {
   display:flex;
   flex-wrap:wrap;
}
div#ced > ul > li {
   flex: 1 0 max-content;
}

Bonjour Alainpre,

Je pense qu'il est indispensable de conserver ul en GRID à cause des media queries qui ajutent la largeur.

etc...
@media (width > 1000px) {grid-template-columns: repeat(2, var(--col-size))}
etc...

En plus la question a été soulevée avec Raphaël qui disait qu'avec Flex la hauteur des cartouches ne pouvait pas être fixe, voir cette discussion.
Modifié par boteha_2 (09 Oct 2025 - 12:34)

La hauteur ne peut pas être fixe, mais elle sera identique pour toute la ligne.
Enfin ce n'était qu'une suggestion.

Bonjour Alainpre,

Merci de ton suivi.

Alainpre a écrit :
La hauteur ne peut pas être fixe, mais elle sera identique pour toute la ligne.

Tu obtiens le même résultat avec GRID :

div#ced > ul > li {grid-template-rows: auto 1fr}

L'objectif est d'avoir la même hauteur quel que soit le nombre de lignes, cela sans donner de valeur en dur.

Pas facile semble-t-il...

PS : pour la question 2 personne n'a une idée, je rappelle :
Quand moins de 768px, les cartouches doivent occuper toute la largeur de l'écran.
Modifié par boteha_2 (10 Oct 2025 - 12:48)

Bonjour,

boteha_2 a écrit :
PS : pour la question 2 personne n'a une idée, je rappelle :
Quand moins de 768px, les cartouches doivent occuper toute la largeur de l'écran.

Coquille dans le code, grid-template-colums, il manque un "n", correction :

section {grid-template-columns: 1fr; grid-template-rows: auto auto}

Reste la question 1 qui est plus théorique j'espère.

Bonjour,

La question me taraude, je reviens à la charge avec un codepen très allégé.

Peut-on avoir sur les deux lignes la même hauteur des cartouches sans rien entrer en dur ?
Cette hauteur serait le hauteur de la cartouche dont le contenu est le plus haut.

Actuellement je dois entrer une valeur en dur :

div#ced > ul > li {grid-template-rows: auto 16.9rem}

Merci d'avance.

Hello,

Je ne suis pas sûr de comprendre exactement ce que tu souhaites et c'est bien compliqué de lire ton code "minifié" mais je veux bien tenter ceci :

div#ced > ul > li {
    display: grid;
    grid-template-rows: auto 1fr;
}

- auto = hauteur du contenu (dans ton cas, c'est la hauteur du p)
- 1fr = hauteur restante dans le parent

PS : si c'est ce que tu cherchais, c'est l'un des principes fondamentaux de Grid Layout et tu devrais apprendre comment fonctionne ce mode de positionnement, ça t'évitera de passer du temps à essayer des trucs au hasard
Modifié par Raphael (19 Oct 2025 - 10:25)

Bonjour Raphaël,

Merci de ton suivi.

Avec ton code la hauteur des cartouches dépend du contenu mais peut être différente d'une ligne à l'autre.

Ligne 1 : hauteur de la cartouche dont la hauteur est la plus haute sur cette ligne.
Ligne 2 : hauteur de la cartouche dont la hauteur est la plus haute sur cette ligne.

Ce que j'aimerais en doutant que cela soit possible.

Lignes 1 et 2 : hauteur de la cartouche la plus haute sur les deux lignes (sans valeur en dur).

Raphael a écrit :
tu devrais apprendre comment fonctionne ce mode de positionnement, ça t'évitera de passer du temps à essayer des trucs au hasard

Tu exagères, j'ai des notions assez bonnes (j'ai lu ton livre).
Mais je ne suis pas un expert et tu sais mieux que moi que GRID n'est pas spécialement facile, d'où mes questions sur des sujets en général un peu compliqués mais qui j'espère n'intéressent pas que moi.
Modifié par boteha_2 (19 Oct 2025 - 15:03)

J'espère que tu ne l'as pas mal pris. Avant mon conseil, j'ai bien précisé "si c'est ce que tu cherchais" puisque dans ce cas la solution était effectivement assez basique.

Dans ton cas, au contraire, les contraintes sont multiples et je ne vois pas comment CSS pourrait intégrer autant de conditions (si * alors ça ou sinon ça).

Là tout de suite je ne vois pas de solution, mis à part faire les calculs / conditions en JS.

Raphael a écrit :
J'espère que tu ne l'as pas mal pris.

Pas du tout.
J'essaye de poser les questions le mieux possible, leur donner un sens général, et je remercie encore tous les experts de ce forum pour leur patience et leur temps.

Raphael a écrit :
Là tout de suite je ne vois pas de solution, mis à part faire les calculs / conditions en JS.

J'y pensais.
Ou encore faire pour une série de cartouches donnée le calcul moi-même selon l'image la plus haute, le texte le plus long, etc.
J'obtiens de façon empirique une valeur (en rem par exemple) que j'injecte dans une déclaration CSS dynamique via PHP.

div#ced > ul > li {grid-template-rows: auto 16.9rem}

Cela me permet d'avoir une hauteur bien ajustée pour chaque série de cartouches.
Pour une autre série ce serait 14.5rem, ou 17.3rem, etc.
Pas très satisfaisant mais faisable.
En espérant être clair...
Modifié par boteha_2 (19 Oct 2025 - 17:02)

Bonjour,

Si j'ai bien compris la contrainte principale (même hauteur pour toutes les lignes sans en connaitre le contenu), il semble qu'on puisse y arriver avec :

grid-auto-rows:1fr;

Exemple complet à https://jsfiddle.net/parsimonhi/yaoev24q/

Amicalement,

Bonjour parsimonhi,

Ah oui, très intéressant.

Je creuse cette piste, je reviens vers vous.

Bonjour,

Comme je sens que tu vas me le demander dans pas longtemps, si tu veux en plus aligner le haut des rectangles arrondis dans ton codepen https://codepen.io/boteha_2/pen/NPxXaZv tu peux rajouter dans le css :

div#ced > ul > li > p:first-of-type {
  height: 1px;
  display: flex;
  align-items: flex-end;
}

Amicalement,

Bonjour parsimonhi,

Bien anticipé !!!

C'est intégré vite fait au codepen.

Je reviens vers vous sous peu avec un codepen ultra-minifié qui intègre les solutions.

Bonsoir,

Voilà un codepen allègé.

grid-auto-rows: 1fr;

Cela fonctionne, merci.

Si le titre est sur deux lignes, passer p en FLEX permet effectivement d'éviter que p auto bouffe de l'espace de div 1fr.
Je ne comprends pas du tout pourquoi, je vais réfléchir...

Par contre les deux lignes vont bouffer le row-gap.

Voyez-vous une solution (sans donner de valeur en dur) ?

Bonjour,

boteha_2 a écrit :
Si le titre est sur deux lignes, passer p en FLEX permet effectivement d'éviter que p auto bouffe de l'espace de div 1fr.
Je ne comprends pas du tout pourquoi, je vais réfléchir...

Flex + align-items: flex-end permet d'aligner les textes des titres en bas des boites p les contenant. On aurait pu faire autrement, mais je préfère utiliser du flex pour ça.

Ce qui permet de ne pas "bouffer de l'espace des div 1fr", c'est le height des p fixé à 1px (on aurait pu mettre n'importe quel valeur dont on est sûr qu'elle est inférieur à la hauteur minimale des titres, donc en gros jusqu'à la valeur du line-height des p contenant les titres). Ça oblige les titres à dépasser de leur boite p respective vers le haut (puisqu'ils ont aligné en bas de leur conteneur). Et comme la hauteur des p est fixée (à 1 px), ce sont uniquement les rectangles arrondis qui s'agrandissent en hauteur au delà de leur contenu.

boteha_2 a écrit :
Par contre les deux lignes vont bouffer le row-gap.

Voyez-vous une solution (sans donner de valeur en dur) ?

Je ne vois pas de solution pour l'instant. Si à la fois les p des titres et les rectangles arrondis n'ont pas de hauteur fixe, on est dans les "sables mouvants". Il faudrait me semble-t-il au minimum un ratio entre les hauteurs des titres et les hauteurs des rectangles arrondis si on veut éviter un gap fixé "en dur" suffisant pour contenir les dépassements des titres vers le haut de leur conteneur.

Amicalement,

Bonjour parsimonhi,

Merci pour les explications et le suivi.

Les titres dans p sont sur une ou deux lignes, pas plus.
Cela peut-il aider à trouver une solution ?
J'y réfléchis de mon côté.

Bonjour,

boteha_2 a écrit :
Les titres dans p sont sur une ou deux lignes, pas plus.
Cela peut-il aider à trouver une solution ?
J'y réfléchis de mon côté.

Même si l'internaute zoome à fond ? Ça m'étonnerait que ça continue à tenir sur 2 lignes en toutes circonstances.

Quoi qu'il en soit, tu peux par exemple mettre un min-height suffisant pour contenir 2 lignes de texte (par exemple 3em). Si le texte ne fait qu'une ligne, il y aura un espace au dessus en plus du gap. Si le texte fait 2 lignes, il n'aura que le gap au dessus. Et s'il fait plus de 2 lignes, alors ça repoussera le rectangle arrondi qui est juste en dessous mais ce rectangle ne sera plus aligné avec les autres rectangles. Ce dernier cas, juste au cas où, ne devrait pas être très grave vu que tu me dis que ça ne doit pas arriver. Mais même si ça arriverait, le texte restera lisible.

Et même dans les cas où tous les textes ne feraient qu'une ligne, tout ce qu'on aura, c'est un espace en haut un peu plus grand que ce qu'on aurait pu faire. Ça me semble acceptable, surtout si ton design est globalement aéré.

div#ced > ul > li > p {
  border: 1px solid green;
  min-height: 3em;
  display: flex;
  align-items: flex-end;
  justify-content : center
}

Amicalement,
Modifié par parsimonhi (22 Oct 2025 - 13:26)

Hello parsimonhi,

Merci de ton suivi.

parsimonhi a écrit :
Même si l'internaute zoome à fond ? Ça m'étonnerait que ça continue à tenir sur 2 lignes en toutes circonstances.

Le zoom agrandit la largeur du li (170px) et le texte reste bien sur 2 lignes.
S'il grossit énormément une media queries appelle une nouvelle mise en page pour petit écran et pas de problème (pas fait dans le codepen mais ça fonctionne).

parsimonhi a écrit :
Quoi qu'il en soit, tu peux par exemple mettre un min-height suffisant pour contenir 2 lignes de texte (par exemple 3em).

Encore plus simplement il me semble que je peux donner dans le GRID de li une valeur de 4 em à la première rangée, un peu plus haute que les deux lignes.

div#ced > ul > li {grid-template-rows: 4em 1fr}

Tout se passe alors comme l'as décrit et plus besoin de mettre p en FLEX.

J'aurais aimé éviter toute valeur en dur (c'est le sujet de la discussion) mais, si une valeur en dur, c'est mieux de l'avoir pour le p que pour le div dont la taille est déterminée par l'image.

Donc l'emploi de grid-auto-rows reste une bonne idée.

C'est fait dans le codepen.

Si tu ne vois pas d'autre solution moi non plus...
Modifié par boteha_2 (22 Oct 2025 - 19:45)