Grid en auto-fill : intégrer un titre sur toute la largeur

Bonjour,

Encore une histoire de GRID.

Ce codepen expose mon problème.

J'essaye d'intégrer un titre qui court sur toute la largeur, border-bottom doit être à la largeur de la grille en auto-fill.
Et hauteur minimale, le texte + padding-bottom.

div#ced > ul > li:first-child {grid-column: 1/-1; text-align: center; color: var(--gris-fonce); padding-bottom: 10px; border-bottom: 1px solid var(--gris-fonce)}

Le résultat est pour moi incompréhensible.
La largeur n'est pas bonne.
La hauteur est délirante.

À noter que si l'on supprime le titre et la déclaration ci-dessus la hauteur du premier élément de la liste ne sera pas bonne (idem hauteur du titre, trop haut) pour là encore une raison qui m'échappe mais peut-être est la clé du problème.

Salut,

Titre de la grille dans un <li> ?

Ça me parait plus pertinent d'utiliser cette structure html :

    <h1>titre de la grille</h1>
    <ul>
        <li>card 1</li>
        <li>card 2</li>
        <li>card 3</li>
        <li>card 4</li>
    </ul>

Modifié par Niuxe (16 Sep 2025 - 17:14)

Bonjour Niuxe,

Comment fais-tu pour que la largeur du h1 soit la même que celle de l'ul ?
h1 fait toute la largeur du parent.
La largeur de l'ul dépend du nombre d'éléments en auto.

Accessoirement c'est la largeur du nombre d'éléments en auto qui m'intéresse, la bordure du titre doit faire cette largeur.

boteha_2 a écrit :
Bonjour Niuxe,

Comment fais-tu pour que la largeur du h1 soit la même que celle de l'ul ?
h1 fait toute la largeur du parent.
La largeur de l'ul dépend du nombre d'éléments en auto.

Accessoirement c'est la largeur du nombre d'éléments en auto qui m'intéresse, la bordure du titre doit faire cette largeur.

Je ne vois pas trop ce que tu souhaites obtenir comme rendu. Si tu as un schema à nous partager, c'est bienvenu. Par défaut, le h1 et le ul auront la même largeur. Si tu veux centrer, autant utiliser flexbox pour les <li>.

edit: Je viens de consulter à nouveau ton codepen et à mon avis, ce sera plus simple de faire un display grid sur le <ul> tout en gardant la sémantique que je t'ai proposée.
Modifié par Niuxe (16 Sep 2025 - 17:21)

Hello Niuxe,

Merci de ton suivi.

Niuxe a écrit :
Je ne vois pas trop ce que tu souhaites obtenir comme rendu.

Je veux que border-bottom du titre commence à l'extrémité gauche de la première cartouche et finisse à l'extrémité droite de la dernière cartouche.
Sachant qu'il y a de 1 à 4 cartouches selon la largeur de la fenêtre.

Est-ce plus clair ?

Niuxe a écrit :
Par défaut, le h1 et le ul auront la même largeur

Ben je pense que non, j'ai déjà expliqué (je me trompe peut-être) :
h1 = largeur du parent.
ul (comme il est fait) = largeur du contenu
Modifié par boteha_2 (16 Sep 2025 - 17:44)

Tu peux toujours faire comme ceci. Un h1 dans un li, ce n'est pas terrible. Ensuite, ce n'est peut être pas ce que tu veux. As tu un schema/une image ? Parce que le h1 a un comportement disgracieux.

As tu pensé à un border-top ?
Modifié par Niuxe (16 Sep 2025 - 18:22)

Hello Niuxe,

Merci de ton suivi.

Bien ton codepen mais tes grid items ont une largeur variable (1fr), je ne suis pas sûr que ce soit adapté à mon projet, je vais y réfléchir.

Niuxe a écrit :
Un h1 dans un li, ce n'est pas terrible.

Tu n'es pas obligé de mettre un h1, perso je ne mets rien.

<li>Titre de la grille</li>

À ce propos, à ma connaissance il n'existe pas d'équivalent à <caption> pour une liste <ul> ?

Niuxe a écrit :
As tu pensé à un border-top ?

Pas bête, cela résoudrait le problème du filet, mais pas celui du centrage du texte dans mon codepen.

Tu demandes un schéma ou une image, mon codepen ne suffit pas ?
Modifié par boteha_2 (16 Sep 2025 - 19:10)

Il faudrait que le li:first-child se comporte comme le p de ce codepen.

Le p est intégré à la grille.
Il occupe toute la largeur de la grille et sa hauteur est celle du contenu.

Est-ce plus clair ?

Bonjour,

Ce codepen montre un autre problème mystérieux.

J'ai enlevé le titre, il y a juste 4 éléments en auto-fill.

La hauteur du premier élément n'est pas correcte (trop grand).

Cela se voit si l'on rétrécit la fenêtre pour avoir au moins deux rangées.

Pourquoi ce premier n'est-il pas à la bonne hauteur ?

Merci d'avance pour vos lumières.

boteha_2 a écrit :
Ce codepen montre un autre problème mystérieux.

Ton code :

div#ced > ul {display: grid; grid-template-columns: repeat(auto-fill,200px); grid-template-rows: minmax(0,450px); grid-gap: 20px 20px; align-items: stretch; justify-items: center}
div#ced > ul > li {display: grid; grid-template-columns: 200px; grid-template-rows: 50px 1fr}

Tu forces toutes les rangées de ta liste à n'occuper que 450px maximum de haut, forcément c'est risqué. J'enlèverais `grid-template-rows: minmax(0,450px);`

Grid-gap n'existe plus : `grid-gap: 20px 20px;` -> `gap: 20px;`

La valeur par défaut des alignements est stretch dans Grid. J'enlèverai `align-items: stretch;`

Tu forces chaque item à une largeur de 200px que tu as déjà définie précédemment sur la liste. J'enlèverais `grid-template-columns: 200px;`

Tu fixes la hauteur de tes paragraphes à 50px, il vaut mieux occuper la hauteur du contenu: `grid-template-rows: 50px 1fr` --> `grid-template-rows: auto 1fr`

Est-ce que tu as toujours les mêmes soucis après cet élagage ? J'avoue que je n'ai pas vraiment compris ton souci.

EDIT : ensuite, si tu souhaites que ta première card occupe toute la rangée :

div#ced > ul > li:first-child {
  grid-column: 1 / -1;
  justify-self: stretch;
}

Modifié par Raphael (17 Sep 2025 - 15:18)

Bonjour Raphaël,

Merci pour le suivi.

J'ai effectué toutes tes corrections.

Sur le codepen c'est presque bon.

Dernier problème :

Si la fenêtre est assez large pour afficher plus de 4 items, par exemple 5, le titre va s'étendre sur la largeur de 5 items et donc le filet va déborder à droite d'une longueur de 1 item et le texte ne sera plus centré par rapport aux 4 items en dessous.

Cela semble assez logique et à vrai dire je ne vois de solution avec autio-fill.
En as-tu une ?

Dans la réalité je connais le nombre de rayons mais si je remplace :
repeat(auto-fill, 200px)
par
repeat(nombre_de_rayons, 200px)
Alors ce n'est plus responsive (sauf erreur).

PS : pour grid-gap qui est obsolète, je te signale que ton tuto excellent n'est plus à jour sur ce point.

grid-gap, grid-column-gap, grid-row-gap : espaces inter-colonnes ou inter-rangées (gouttières)
Modifié par boteha_2 (17 Sep 2025 - 19:39)

boteha_2 a écrit :
Si la fenêtre est assez large pour afficher plus de 4 items, par exemple 5, le titre va s'étendre sur la largeur de 5 items et donc le filet va déborder à droite d'une longueur de 1 item et le texte ne sera plus centré par rapport aux 4 items en dessous.

Cela semble assez logique et à vrai dire je ne vois de solution avec autio-fill.
En as-tu une ?

Personnellement j'aurais de toute façon extrait ton "titre" hors de la grille (il n'a rien à faire en tant que <li> de toute façon). En conservant uniquement tes "cards" dans la grille ça simplifierait énormément le gabarit et résoudrait ton problème.

boteha_2 a écrit :
Dans la réalité je connais le nombre de rayons mais si je remplace :
repeat(auto-fill, 200px)
par
repeat(nombre_de_rayons, 200px)
Alors ce n'est plus responsive (sauf erreur).

Oui c'est justement le boulot de `auto-fill- et `auto-fit` de s'adapter dynamiquement à l'espace disponible : https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

boteha_2 a écrit :
PS : pour grid-gap qui est obsolète, je te signale que ton tuto excellent n'est plus à jour sur ce point.

grid-gap, grid-column-gap, grid-row-gap : espaces inter-colonnes ou inter-rangées (gouttières)

Ah oui merci, c'est corrigé.

Bonne journée

Bonjour,

Effectivement je pense que la structure du HTML est mal adaptée.
J'aurais plutôt vu cela :

     <div>
        <h1>titre de la grille</h1>
        <div>card 1</div>
        <div>card 2</div>
        <div>card 3</div>
        <div>card 4</div>
    </div>

Et pour le titre, les styles suivants :
h1 {
grid-column:1 / span 4;
}

A voir
Modifié par Alainpre (18 Sep 2025 - 08:05)

Alainpre a écrit :
J'aurais plutôt vu cela :

Dans ton exemple, tu conserves le titre dans la grille et le problème sera exactement le même. L'idée est de sortir le titre de la grille (et de conserver le rôle de liste pour les cards puisque c'est adapté).

Je pensais à cette structure :

<section>
  <h1>Titre de la grille</h1>
  <ul class="grid">
    <li>card 1</li>
    <li>card 2</li>
    <li>card 3</li>
    <li>card 4</li>
  </ul>
</section>

Bonjour,

Merci pour votre suivi.

Raphael a écrit :
Personnellement j'aurais de toute façon extrait ton "titre" hors de la grille (il n'a rien à faire en tant que <li> de toute façon). En conservant uniquement tes "cards" dans la grille ça simplifierait énormément le gabarit et résoudrait ton problème.

Ok, voir le codepen mis à jour.

C'est aussi ce que recommande Niuxe et j'ai évoqué l'inconvénient.

h1 = largeur du parent
ul = largeur du parent
grille comme elle faite = largeur du contenu

Donc la bordure-bottom du titre est plus large que la grille et le titre n'est pas centré par rapport à la grille.

Voyez-vous une solution en conservant une largeur fixe pour les grid-items ?

Bonjour,

Il faudrait que la grille en auto-fill (ou auto-fit) détermine la largeur de son parent.

Voyez-vous une solution ?

boteha_2 a écrit :
Voyez-vous une solution ?

En passant pas le modèle "auto-fill/fit" ce n'est pas possible mais si tu acceptes certaines concessions (media queries), ça peut le faire ainsi :

#ced {
  width: fit-content; /* s'adapte à son contenu */
}

ul {
  --col-size: 200px;
  display: inline-grid; /* s'adapte à son contenu */
  gap: 20px;
  padding: 0;
  justify-content: center;
  justify-items: center;
  border: 1px solid red;

  @media (width > 48rem) {
    grid-template-columns: repeat(2, var(--col-size));
  }
  @media (width > 60rem) {
    grid-template-columns: repeat(4, var(--col-size));
  }
}

Tu peux ensuite centrer ou aligner tout ce beau monde comme tu voudras.

Codepen : https://codepen.io/raphaelgoetter/pen/dPGPzOG

Bonjour Raphaël,

Merci pour le suivi.

Je comprends ta solution.
Dans la réalité il y a entre 2 et 9 rayons.
Dans le cas de 9 rayons cela oblige à 9 media queries, sauf erreur.

grid-template-columns: repeat(1, var(--col-size));

 grid-template-columns: repeat(2, var(--col-size));

 grid-template-columns: repeat(3, var(--col-size));

... etc ...

 grid-template-columns: repeat(9, var(--col-size));

De plus, en version petit écran la mise en page en différente, ces media queries doivent être conditionnées elles-mêmes par une media querie.
Je n'ai jamais fait mais cela doit être possible.

C'est rigoureux, cela a le mérite de marcher mais c'est très lourd.

Trop dommage que fit-content ne fonctionne pas avec auto-fill, ils auraient pu y penser...

J'ai l'impression que javascript ne serait d'aucun secours car il est impossible de mesurer la largeur de la grille en auto-fill qui est différente de la largeur de l'élément en display GRID.

Pas de solution du côté de ce bon vieux inline-block ?
Modifié par boteha_2 (21 Sep 2025 - 12:43)

boteha_2 a écrit :
Pas de solution du côté de ce bon vieux inline-block ?

Non, ce sera les mêmes contraintes qu'avec inline-grid / inline-flex

boteha_2 a écrit :
Dans la réalité il y a entre 2 et 9 rayons.
Dans le cas de 9 rayons cela oblige à 9 media queries, sauf erreur.

Ah mais attends, je n'ai sans doute pas compris la contrainte : le nombre de colonnes doit dépendre de la taille d'écran ou du nombre d'éléments ? Parce que dans le 2e cas, la solution n'est pas la même.

Hello,

Le nombre de colonnes dépend de la taille de l'écran.

Avec les media queries, il me semble que la logique est la suivante :

Si place pour 9 colonnes (en gros 1800px)
grid-template-columns: repeat(9, var(--col-size));

Si place pour 8 colonnes (en gros 1600px)
grid-template-columns: repeat(8, var(--col-size));

etc...

Donc 9 media queries à aligner.

Ai-je bien compris ?