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)