[Résolu] Rapprocher les grid items

Bonjour,

Ce codepen illustre mon problème.

Pourquoi les éléments de la colonne 2 sont-ils stupidement décalés vers la droite.?

Je les veux collés contre la première colonne, sans aucune marge.

Le code est facile à analyser, merci d'avance pour votre aide.

sais pas mais c'est quoi ce charabia dans ton code?

Quantit&eacute
R&eacute
&rsaquo
C&acirc
Apa&h

Salut,

boteha_2 a écrit :
Pourquoi les éléments de la colonne 2 sont-ils stupidement décalés vers la droite.?
Je les veux collés contre la première colonne, sans aucune marge.

"Stupidement" ? Parce que tu leur as demandé...

grid-template-columns: auto auto;

Tente plutôt max-content ou une largeur en dur.

drphilgood a écrit :
sais pas mais c'est quoi ce charabia dans ton code?
Quantit&eacute
R&eacute
&rsaquo
C&acirc
Apa&h

Les Unicode des caractères spéciaux genre accents

Salut,

Si tu veux faire deux colonnes égales mais fluides quand même tu peux faire comme ça :

grid-template-columns: minmax(0, 1fr)), minmax(0, 1fr));

Et pour éviter de te répéter ça donne même cela :

grid-template-columns: repeat(2, minmax(0, 1fr));

Enfin, par sécurité pour les petites largeurs de fenêtre je propose même ceci :

<div class="grid2 gap">
  <div></div>
  <div></div>
</div>

[class^=grid] {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); /* la variable CSS ne prévoit qu'une colonne par défaut */
}
@media (min-width: 35em) {
  .grid2 {
    --n: 2; /* pour les largeurs suffisantes la variable est incrémentée à 2 colonnes */
  }
}
[class^=grid].gap { /* pour rappel, c'est la largeur des gouttières */
  gap: 1em;
}

Modifié par Olivier C (27 Mar 2023 - 08:03)

Bonjour,

max-content est la solution.

Il faudra que je comprenne la différence entre max-content et auto.

max-content = la taille de l'élément le pus grand

auto = la taille définie par le contenu.
Mais pourquoi cette taille n'est-elle pas celle de l'élément le plus grand ?

Autrement le code d4olivier_C est très intéressant comme toujours.

En l’occurrence je ne peux pas faire deux colonnes fluides mais je lis avec profit.

Je n'ai jamais compris l'intérêt de coder des éléments en dur, ou tout au moins de manière fixe : pourquoi ne pas faire en sorte que les éléments soient adaptatifs dès le départ ?

boteha_2 a écrit :
auto = la taille définie par le contenu.

Défini par le contenu oui mais pas forcément le plus grands. Ca prend en compte les autres colonnes etc. Voila la spec :

mozilla a écrit :
auto
As a maximum represents the largest max-content size of the items in that track.
As a minimum represents the largest minimum size of items in that track (specified by the min-width/min-height of the items). This is often, though not always, the min-content size.
If used outside of minmax() notation, auto represents the range between the minimum and maximum described above. This behaves similarly to minmax(min-content,max-content) in most cases.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

boteha_2 a écrit :
En l’occurrence je ne peux pas faire deux colonnes fluides mais je lis avec profit.

Qu'est-ce que tu appelles une colonne fluide ? C'est pas fluide la ?

Olivier C a écrit :
Je n'ai jamais compris l'intérêt de coder des éléments en dur, ou tout au moins de manière fixe : pourquoi ne pas faire en sorte que les éléments soient adaptatifs dès le départ ?

Adaptatif ? C'est a dire ? Qu'ils se colle els uns aux autres ? C'est le taff du flex ça.

Bonne aprem

Olivier C a écrit :
Je n'ai jamais compris l'intérêt de coder des éléments en dur, ou tout au moins de manière fixe : pourquoi ne pas faire en sorte que les éléments soient adaptatifs dès le départ ?

Je ne comprends pas ta remarque.
Dans ma mise en page la taille des éléments est définie par leur contenu.

PS : je réponds à _laurent en fin de journée.
Modifié par boteha_2 (27 Mar 2023 - 15:15)

Je n'ai pas dû comprendre la problématique... pas grave, du moment que tu arrives à tes fins.
Modifié par Olivier C (27 Mar 2023 - 16:24)

boteha_2 a écrit :
Il faudra que je comprenne la différence entre max-content et auto.

max-content = la taille de l'élément le pus grand

auto = la taille définie par le contenu.
Mais pourquoi cette taille n'est-elle pas celle de l'élément le plus grand ?

En fait, dans Grid Layout il y a un point qui est rarement bien compris, je vais tenter de l'expliquer...

Spoiler : à la fin de mon histoire, il y a bien un rapport avec ton "auto" récalcitrant.

La valeur par défaut des propriétés d'alignements (par exemple pour justify-content) vaut... normal (et non start comme beaucoup de monde le croit), et là ça se complique parce que ce "normal" est variable selon... la taille des colonnes/rangées :
- si les tailles sont définies en "auto", alors "normal" vaut "stretch"
- sinon, "normal" vaut "start"

C'est drôle non ?

Concrètement, si tu définis tes largeurs de colonnes en "auto", ce sera un auto qui correspond à la taille du contenu puis qui sera étiré car justify-content vaudra "stretch".

Si tu utilises par exemple des tailles en max-content, alors justify-content vaudra "start" et tes contenus seront bien calé sur la gauche.

Bonne aspirine !
Modifié par Raphael (27 Mar 2023 - 17:34)

Bonjour Raphaël,

Merci de ton suivi.

Ça, tu pourras en parler dans ton prochain livre...

Accessoirement j'avais bien pensé à déclarer justify-items: start (il me semble que la valeur par défaut est stretch ?).

Mais si je te suis c'est la propriété justify-content qui était la cause de mes déboires.

Mon problème est résolu avec max-content.
J'attends d'avoir le temps d'examiner avec attention le code d'Olivier C avant de cocher Résolu.

boteha_2 a écrit :

Accessoirement j'avais bien pensé à déclarer justify-items: start (il me semble que la valeur par défaut est stretch ?)

En fait c'est aussi "normal", mais tu l'as effectivement écrasé en mettant "start"

boteha_2 a écrit :
Mais si je te suis c'est la propriété justify-content qui était la cause de mes déboires.

Oui l'ensemble de la grille correspond bien à justify-content. Tu peux tester en écrasant sa valeur par défaut par "start" aussi et ça devrait fonctionner aussi.

Bonjour Raphaël,

Effectivement, dans le codepen une largeur auto associée à justify-content: start rend la mise en page attendue pour auto et de fait équivalente à max-content.

boteha_2 a écrit :
Bonjour Raphaël,

Effectivement, dans le codepen une largeur auto associée à justify-content: start rend la mise en page attendue pour auto et de fait équivalente à max-content.

OK j'ai donc plutôt bien compris le principe

Dans ce cas, je préfère cette solution (justify-content: start) qui évite d'utiliser des largeurs en max-content qui pourraient être préjudiciables :
https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/

Bonjour Raphaël,

Merci pour le lien :

The undesirable effect of max-content
max-content, as we’ve learned, works pretty well for an infinite available space where the box element can contain all of its content without being wrapped and overflowing its parent container.
However, in a case where the parent or ancestral element cannot accommodate the size of the box, the box tends to overflow:

C'est bon à savoir.

Dans mon cas je préfère donc la valeur auto associée à justify-content: start.

Je vais sans doute renommer cette discussion car les différences entre auto et max-content sont devenues le sujet essentiel.

Bonjour,

J'ai découvert un nouveau problème dans le codepen.

Bloc 1 : normal
Bloc 2 : normal
Bloc 3 : les deux éléments de droite (avec bordure rouge) sont décalés d'un paquet de pixels vers la droite.

Si l'on supprime la déclaration de l'input cela redevient normal.

div.pan input {width: 3em; padding: 0.2em 2px; text-align: center; border: 2px solid #999; line-height: 1.2em; margin-right: 10px}

J'avoue n'avoir aucune idée sur la cause du problème.

Bonjour,

J'ai ajouté une bordure verte sur les éléments en première colonne.

div.pan p {grid-column: 1; grid-row: 2; border: 1px solid green}

Cela permet de voir que le problème sur le troisième bloc n'est pas lié aux espacements.

C'est la largeur du p qui pose problème comme si une marge avait été ajoutée à droite de l'input.
Trop bizarre...

Hello !

Nouveau problème : nouveau sujet de forum de préférence, histoire de retrouver plus facilement chaque problème lorsqu'ils seront résolus

Ton problème de largeurs de colonnes provient de... tes titres h4 : en effet puisque tu as choisi des tailles de colonne "auto", elles s'adaptent à la dimension des contenus les plus longs. Et ce sont les titres.

La meilleure solution dans ce cas est généralement de ne jamais avoir *toutes* les largeurs en auto, je te conseille

div.pan {
    grid-template-columns: auto 1fr;
}

Modifié par Raphael (02 Apr 2023 - 09:46)

Bonjour Raphaël,

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

Cela efface mon souci, codepen impeccable.

Je coche Résolu.

MERCI beaucoup pour votre aide.

Raphael a écrit :
Nouveau problème : nouveau sujet de forum de préférence, histoire de retrouver plus facilement chaque problème lorsqu'ils seront résolus

Bien noté mais on reste dans la même thématique.
Si en tant qu'administrateur tu veux renommer cette discussion je te laisse juge.

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

Oui, il est bien d'utiliser "minmax(0, 1fr)" et pas seulement "1fr", car les navigateurs se comportent différemment si l'on ne précise pas un minimum : par défaut Chrome affecte la largeur d'une gouttière, Firefox affecte à 0.
Modifié par Olivier C (03 Apr 2023 - 08:11)