[Résolu] 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...

Bonjour,
Il me semble que tu as zapper le display:grid pour li.
Cdt

Bonjour gcyrillus,

Bien vu, c'est mieux avec le display:grid pour li, voir le codepen.

grid-auto-rows remplit parfaitement son office, dans cette configuration le problème est résolu.

Dans la vie réelle j'ai un problème trop énervant.
Les hauteurs sont bonnes, sauf pour le premier élément qui lui fait juste la hauteur de son contenu.

Avant que j'envoie un code un peu indigeste avez-vous une idée ?

boteha_2 a écrit :


Dans la vie réelle j'ai un problème trop énervant.
Les hauteurs sont bonnes, sauf pour le premier élément qui lui fait juste la hauteur de son contenu.

Avant que j'envoie un code un peu indigeste avez-vous une idée ?

Peut-être vérifier avec le validateur qu'il n'y a pas d'erreur de syntaxes dans le html, avant de mettre les styles en causes. Puis ne charger que cette portion de styles pour vérifier qu'il n'y a pas d'autres styles en conflit.
Cdt

Hello,

gcyrillus a écrit :
Peut-être vérifier avec le validateur qu'il n'y a pas d'erreur de syntaxes dans le html,

C'est fait depuis longtemps : 0 erreur, 0 warning.
Idem pour la feuille de style avec le validateur du W3C.

gcyrillus a écrit :
Puis ne charger que cette portion de styles pour vérifier qu'il n'y a pas d'autres styles en conflit.

Ok, je continue à chercher...
j'ai pisté tous les first-child et first-of-type sans rien trouver.

Bonjour,

Le bug est reproduit dans ce codepen.

Le premier élément "Fourchettes en argent " est moins haut que les autres éléments dont la hauteur est en revanche égale et déterminée par le dernier élément (celui dont l'image est la plus haute).

J'ai mis tous les code CSS, y compris concernant des éléments html qui ne sont pas dans le codepen.

Le bug doit venir des déclarations concernant la structure, il n'y en pas beaucoup mais je n'arrive pas à trouver cette erreur.

Je n'ai pas mis les media-queries.

Pour ul, le grid-template-rows devrait être en 1fr et pas auto.
Cdt

gcyrillus a écrit :
Pour ul, le grid-template-rows devrait être en 1fr et pas auto.

Bien vu, merci mille fois.

Cela fonctionne.

Cela étant, comme c'est grid-auto-rows qui calcule la hauteur, n'est-il pas plus logique de mettre ?

grid-template-rows: none;
grid-auto-rows: minmax(0, 1fr)

C'est ce que j'ai fait dans le codepen et cela fonctionne aussi.
Modifié par boteha_2 (26 Oct 2025 - 15:25)

Bonjour,

Je coche Résolu.

Encore merci aux experts qui ont participé à cette discussion et trouvé une bonne solution.