Grid cell et img

j'ai un header et un content avec

.wrapper {
grid-template-areas: "header header header header"
"content content content content";
grid-template-columns:1fr 1fr 1fr 1fr;
}
.brand {
grid-area: header;
}
.left {
  grid-area: content;
}

je mets un logo dans le html

<div class="wrapper">
<div class="brand">
            <img src="logo.jpg">
</div>
<div class="left">
...
</div>
<div class="main">
...
</div>
</wrapper>

si le logo est plus large que la première grid cell il ne déborde pas sur la deuxième, il pousse la largeur de la cellule. ce qui fait que dans content la cellule left prend la largeur de celle qui contient le logo.
j'ai lu le livre de R Goetter dans tous les sens en vain.
j'ai trouvé une première solution, mais j'aimerais que le logo déborde sur la deuxième grid cell

.wrapper > div img {
   display:block;
   max-width:100%;
   }

merci.

Salut,


Tu as oublié de dire bonjour (mais comme tu as dit merci ça doit juste être un oubli ) Rien de grave hein mais c'est plus agréable pour ceux qui viennent t'aider

Alors déjà tu fermes <div class="wrapper"> avec </wrapper> et pas </div> ça marche pas bien du coup, et ensuite tu as oublié de mettre display:grid; sur le wrapper

Sinon soit j'ai pas compris ce que tu voulais soi ça fonctionne bien* :


https://jsfiddle.net/undless/jgyf6L3o/2/

*[EDIT] : Ça "fonctionne bien" dans le sens ou l'apparence correspond à ce que tu as codé... du coup je crois que j'ai pas compris ce que tu voulais faire..
Modifié par _laurent (02 Mar 2020 - 16:49)

merci Laurent pour cette réponse aussi rapide.
le bonjour est effectivement un oubli
et le </wrapper> une faute de frappe
le code que j'ai cité est dans un @media et est déclaré display:grid; au début du css
sympa ton lien jsfiddle.net, c'est à toi ? je me suis inscrit
je vais tester
a+

pas de soucis

hit7374 a écrit :
sympa ton lien jsfiddle.net, c'est à toi ? je me suis inscrit

Haha non pas du tout a moi mais hyper pratique surtout ici sur des forum pour partager des bouts de code. Tu en as d'autres comme https://codepen.io/pen/ par exemple

Si tu mets ton display:grid; dans une media queries il ne sera pas appliqué tant qu'on ne rempli pas les condition hein !
Test et reviens nous dire ce qui coince dans ce que tu veux faire
Modifié par _laurent (02 Mar 2020 - 17:07)

je suis en train de coder un template pour joomla V4
quand il sera bien avancé je le partagerai pour tous les tests et optimisations.
a+
JP

Bonjour et bienvenue,

La 1ère étape est de valider ton code HTML sur le validateur du W3C https://validator.w3.org/ , ça permet de détecter les balises fermantes maltàpropos (il lui faut une URL publique ou sinon c/c du code source généré).
Et CSS http://jigsaw.w3.org/css-validator/ : pas testé depuis un bail, je ne sais pas s'il a encore beaucoup de faux positifs bien ennuyeux mais dans le doute se concentrer sur les Error et moins sur les Warning.

Ensuite avec Firefox tu as un superbe outil pour inspecter les Grid : F12 pour ouvrir les Outils du développeur et inspecter le grid container. À côté de l'élément tu as un "cartouche" grid sur lequel il faut cliquer et là ta grille se visualise.
À droite tu peux voir si oui ou non tes déclarations sont prises en compte (avec les MQ le cas échéant).

Si malgré le max-width: 100% tu as encore des soucis, il y a peut-être le coup de remplacer 1fr par minmax(0, 1fr). Mais c'est après avoir éliminé les autres sources éventuelles de problème, par exemple si ça fonctionne avec un mot par grid item mais plus quand on fiche 5000 mots ou une image de 3000px dans un des grid item…
Modifié par Felipe (03 Mar 2020 - 09:53)

Salut Felipe,
oui j'utilise l'outil d'inspection firefox depuis des lustres même avant le grid layout.
bonne idée le validator
je vais tester aussi le minmax()
merci