Appliquer max-content à la hauteur des grid items

(reprise du message précédent)

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)

Bonjour,

boteha_2 a écrit :
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.

Oui !

boteha_2 a écrit :
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...

Ça me parait bien aussi comme ça.

Amicalement,

Bonsoir parsimonhi,

parsimonhi a écrit :
Ça me parait bien aussi comme ça.

Merci de ton aide, je reste sur cette solution.

J'attends un peu avant de cocher Résolu.

Hello
Pour que toutes les cartouches aient la même hauteur sans définir de valeurs fixes, garde le conteneur principal en grille ou en flex et utilise align-items: stretch, puis de structurer chaque cartouche en colonne avec un élément interne défini en flex: 1pour qu’il s’étire automatiquement à la même hauteur que les autres. Quand la fenêtre fait moins de 768 px, il faut passer la grille sur une seule colonne (1fr) et imposer width: 100% aux cartouches et ajoute min-width: 0 pour que le contenu n’en limite pas la largeur. J’avais le même problème quand j’étais débutant en tant que développeur front-end chez mg.relais.services mais avec la pratique cela devient vite naturel

lien en no-follow et hors sujet retirer
Modifié par Yvanjoe (25 Oct 2025 - 18:12)

Bonjour Yvanjoe,

Yvanjoe a écrit :
Pour que toutes les cartouches aient la même hauteur sans définir de valeurs fixes, garde le conteneur principal en grille ou en flex et utilise align-items: stretch, puis de structurer chaque cartouche en colonne avec un élément interne défini en flex: 1pour qu’il s’étire automatiquement à la même hauteur que les autres.

C'est en gros ce qui est fait dans le codepen.
Avec toutefois le problème des marges verticales développé dans la discussion.

Yvanjoe a écrit :
Quand la fenêtre fait moins de 768 px, il faut passer la grille sur une seule colonne (1fr) et imposer width: 100% aux cartouches et ajoute min-width: 0 pour que le contenu n’en limite pas la largeur.

C'est noté, ma version MOBILE repose sur cette approche.

Détail, avec width: 100%, si l'élément est de type block, la largeur est de 100% quel que soit le contenu, non ?
Je ne comprends pas ce qu'apporte min-width: 0...
Modifié par boteha_2 (25 Oct 2025 - 14:08)

Bonjour,

Ce codepen montre les bases de la version pour petit écran.

Comme le texte dans p tient forcément sur une seule ligne je peux être en sables mouvants :

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

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

Je ne comprends pas pourquoi le DIV n'occupe pas toute la hauteur, il me semble que c'est bien demandé dans la déclaration ci-dessus.

La solution m'aidera peut-être à comprendre un curieux bug dans la vie réelle.
Toutes les hauteurs sont identiques, sauf celle du premier élément de la liste...