Taille Grid item vs taille fenêtre

Bonjour,

Prenons une grid toute simple.

grid-template-columns: auto 1fr;

Dans la deuxième colonne, j'ai un grid item avec à l'intérieur des images à largeur fixe et du texte.

<img width=500 />
<p>un long texte</p>
<img width=500 />
<p>un long texte</p>
etc.

Si je rétrécis la fenêtre à moins de 500px ma deuxième colonne est bloquée par les images à largeur 500px et mon texte devient partiellement caché, alors que je veux qu'il s'adapte de façon fluide à la largeur de la fenêtre.

Je peux régler le problème en créant un flex-item par image et un flex-item par p mais ma question est :

Dans un même flex item dont la largeur est inconnue comment faire pour que le texte s'adapte à largeur de la fenêtre alors que d'autres éléments sont plus larges que la fenêtre ?

J'espère que ma question est claire.
Modifié par boteha_2 (30 Nov 2022 - 20:45)

Salut,

Overflow:hidden sur le grid item : https://jsfiddle.net/undless/qatxcyb1/


Bonne jorunée

boteha_2 a écrit :
J'attribue à la deuxième colonne une largeur de 1fr, soit tout l'espace disponible dans la fenêtre mais pas plus.

Quand mon image dépasse 1fr, est-il normal qu'elle élargisse le grid-item au-delà de 1fr ?
Le comportement normal n'est-il pas de laisser l'image dépasser du grid-item dont la largeuir reste de 1fr

Hello,

En fait non, c'est normal : une taille de colonne en "fr" fait au minimum la taille de son contenu (sous-entendu "1fr" = "minmax(min-content, 1fr)") donc elle s'adapte à la taille de ton image.

Si tu veux que ta colonne puisse se rétrécir, la bonne valeur est minmax(0, 1fr). C'est une valeur beaucoup plus sûre que "1fr" d'ailleurs.

Bonne journée
Modifié par Raphael (01 Dec 2022 - 14:09)

Bonjour Raphaël,

Merci de ta réponse.

Depuis quelques jours ton livre sur display GRID est mon livre de chevet, afin d'essayer de résoudre ce problème.

Je fais des tests en fin de journée et reviendrai vers vous.

Je n'y arrive toujours pas et cela m'énerve.

En l’occurrence cela concerne l'élément #recherche

@media screen and (min-width: 769px)
{
body {grid-template-columns: 45px 20em auto minmax(0, 1fr); grid-template-rows: 45px auto auto; grid-template-areas: "i t m s" "n p r r" "f f f f"}
a#logo_mob {grid-area: i}
p#logo {grid-area: t}
ul#menuhaut {grid-area: m}
div#panier {grid-area: p; width: 20em}
#recherche {grid-area: r; margin: 35px 10px 0 45px}
div#footer {grid-area: f}
}

#recherche {align-self: start; justify-self: start; overflow: hidden}

@media screen and (max-width: 768px)
{
body {grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat (6, auto); grid-template-areas: "s s" "i m" "a a" "r r" "f f" "p p"}
div#header {grid-area: s}
a#logo_mob {grid-area: i}
ul#menuhaut {grid-area: m}
p#mob {grid-area: a}
#recherche {grid-area: r}
#footer {grid-area: f}
div#panier {grid-area: p;  width: auto}
}

Quelque chose dans ce code explique-t-il la problème avec #recherche ?
Modifié par boteha_2 (01 Dec 2022 - 19:36)

Bonjour,

Accessoirement je ne peux pas agir sur le width de #recherche

#recherche {max-width: 200px !important}

Cela n'a aucun effet sur la largeur de cet élément.

Il est de fait en largeur auto et cela fixe définitivement la largeur du grid-item qui le contient.

Bonjour,

Sur un site de test ce lien illustre le problème, aussi bien en version PC que Mobile.
C'est le tableau des prix qui joue le rôle de l'image à taille fixe.

C'est un site de test, ne pas faire attention aux warnings.
Modifié par boteha_2 (02 Dec 2022 - 22:05)

boteha_2 a écrit :

Sur un site de test ce lien

Tu peux préciser (illustrer ?) quel est exactement le problème sur cette page ?
Attention, tu as placé tous les éléments <meta> dans... body, ça a forcément des conséquences sur l'interprétation du code par un navigateur puisque tous ces éléments deviennent des grid items à partir du moment où body est en display grid.
Modifié par Raphael (02 Dec 2022 - 16:58)

Bonjour Raphaël,

Ah non, les meta sont dans le head, quand même.

Il y a un warning PHP mais sans influence sur la mise en page je suppose.

Rétrécis la largeur de la page avec vue sur le bas du tableau des prix.

Le texte Note, Descriptif, est bloqué par la largeur du tableau au lieu d'être fluide.

Idem quand tu passes en version mobile, où accessoirement le tableau est supposé être flexible (Display FLEX pour les tr)..

Raphael a écrit :
Si tu veux que ta colonne puisse se rétrécir, la bonne valeur est minmax(0, 1fr). C'est une valeur beaucoup plus sûre que "1fr" d'ailleurs.

Oui, j'ai remarqué que 1fr est différemment interprété entre Chrome et Firefox si pas de valeur min par défaut : pour Chrome il y aura au minimum la largeur d'une gouttière, pour Firefox la valeur sera de 0. Firefox semble mieux suivre les spec', mais du coup, dans tous les cas, il vaut mieux définir explicitement une valeur min.
Modifié par Olivier C (02 Dec 2022 - 18:50)

Bonjour,

Bon, je viens de faire un petit test vite fait en copiant le html et les feuilles de styles cf.css et f.css, et en retirant les balises générées par le warning php et qui se trouvent avant le <!doctype>. Ça a l'air de mieux marcher (mais comme je n'ai pas trop compris le problème initial, je ne sais pas si ça règle ce problème initial).

Amicalement,
Modifié par parsimonhi (02 Dec 2022 - 19:01)

Encore merci de votre suivi.

parsimonhi a écrit :

Quand un warning php est inclus dans la page avant le &lt;!DOCTYPE html&gt;, ça peut conduire parfois à des résultats inattendus (même si ici ce n'est peut-être pas le cas). C'est une mauvaise pratique. Le &lt;!DOCTYPE html&gt; doit être en tout premier dans la page.

100 % d'accord mais c'est un site de test.
En production il n'y a pas de warning.
Dès que j'ai le temps je remplace ce lien par une page html sans le warning et avec les deux feuilles de style dans le head.

Olivier C a écrit :

Oui, j'ai remarqué que 1fr est différemment interprété entre Chrome et Firefox si pas de valeur min par défaut : pour Chrome il y aura au minimum la largeur d'une gouttière, pour Firefox la valeur sera de 0. Firefox semble mieux suivre les spec', mais du coup, dans tous les cas, il vaut mieux définir explicitement une valeur min.

C'est ce que j'ai fait, j'ai remplacé 1fr par min (0, 1fr).

Voilà le nouveau lien sans warning.

le problème est donc :
Tableau : il occupe la place de son contenu, Ok.
Texte sous le tableau : il doit être fluide et rester complet quelle que soit la largeur de la fenêtre.


Modifié par boteha_2 (02 Dec 2022 - 22:15)

Salut,

Il faut enlever le justify-self: start; de #recherche . Me demande pas pourquoi ca doit lui donner je ne sais quel contexte j'ai pas le temps de creuser trop loin.

Bonne journée