[Résolu] Column auto-fit dans un parent max-width: min-content

Hello,

Très franchement je ne suis vraiment pas sûr d'avoir compris.

Pour m'éviter un doute, quand tu parles d'une grille "auto-fit", tu parles bien d'une construction telle que celle-ci ?

.grid {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Si tel est le cas, ta grille génèrera toujours des colonnes de tailles identiques, on est d'accord ?

Bonjour Raphael,

Raphael a écrit :
Si tel est le cas, ta grille génèrera toujours des colonnes de tailles identiques, on est d'accord ?

OUI, du genre :

grid-template-columns: repeat(auto-fit, 140px)

En fait j'aimerais que mon GRID en auto-fit détermine le min-content.

Et je suis en auto-fit pour être responsive sans media-query.

Peut-être cherches-tu quelque chose comme ceci ? :

grid-template-columns: repeat(auto-fit, minmax(min(var(--size-grid, 20em), 100%), 1fr));

Tu peux ajuster `--size-grid` pour arriver à tes fins.
Modifié par Olivier C (25 Apr 2024 - 20:55)

Bonjour Olivier C,

Olivier C a écrit :
Peut-être cherches-tu quelque chose comme ceci ? :

grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));

Non, cela ne change rien.

J'ai trouvé une solution mais qui implique une media-query :

<div> // max-width: min-content
<div id="grid"> // GRID grid-template-columns: 210px 210px
<ul>
<ul>
</div>
<table> width 320px
</div>

Dans ce cas c'est une largeur de 420px qui va être prise en compte pour le calcul de min-content du parent.

Et j'ajoute :

@media screen and (max-width: 420px).
{
div#grid {grid-template-columns: repeat(auto-fit, 210px)}
}

Pour être responsive.
min-content passe à 320px (la largeur de la table) et les deux Grid items sont l'un au-dessus de l'autre.

Peut-être avez-vous compris ce que je cherche à faire...

La question est: peut-on y arriver sans media-query ?
Sachant que la largeur des Grid ittems varie d'une page à l'autre et donc qu'il faut pour chaque page calculer le breaking point à la volée côté PHP (ce qui est possible avec les variables dont je dispose).
Modifié par boteha_2 (25 Apr 2024 - 21:34)

Bonjour,

J'avoue ne pas comprendre 3 choses:
A. quel est est l’élément qui détermine le min-content que tu évoque dans le conteneur parent ?
A.1 il y a un tableau de largeur .. inconnue?
A.2 il y a un conteneur avec 2 listes, elles ont aussi forcement une largeur

B. Pourquoi un grid layout et pas un flex layout
B.1Tu n'as que : soit 1 ligne soit 1 colonne à afficher (il n'y a que deux éléments dans ta grille).
B.2Pour deux petites listes on pourrait même imaginer qu'un column-width: max(xx,min(xx,XX); ferait l'affaire.

C. la media querie sur un écran de 420px qui règle ton soucis?
C.1 il y aurait contradiction avec le min-content avec un tableau qui déborderais et des listes qui se réduirait en largeur pour s'afficher l'une sur l'autre pour ne pas faire déborder la grille.
C.2 Mais si le tableau est déjà d'une largeur inférieur , la grille ne devrait-elle pas déjà être affichée en colonne avant ce point de rupture ?

En gros je n'arrive pas à comprendre le comportement attendu ni ce qui le pilote avec ce min-content posé sur le parent ? As tu quelques exemples en lorem ou dessins à partagé ?

Cordialement

Bonjour,

Merci de votre suivi.

J'espère que ce codepen vous aidera à mieux comprendre ma question.

div.main_1
C'est le GRID qui détermine min-content du parent.

div.main_2
C'est la TABLE qui détermine min-content du parent.

div.main_3
Grâce à media-query le min-content est déterminé par :
GRID si la largeur de la fenêtre est supérieure à la somme des largeurs des deux éléments du GRID.
TABLE autrement.

Et ma question : peut-on obtenir la même résultat sans media-query ?
Quitte à changer le code html

J'espère aussi que le codepen répond aux questions de gcyrillus.

Je complète :

A.1 il y a un tableau de largeur .. inconnue?
Largeur définie par le contenu.
A.2 il y a un conteneur avec 2 listes, elles ont aussi forcement une largeur
OUI, enfin la largeur est celle des grid items, elle est définie par grid-template-columns.

B. Pourquoi un grid layout et pas un flex layout
Je ne vois pas ce qu'apporte le FLEX, on devrait jouer avec flexwrap il me semble et je ne vois pas comment éviter une media-query.

B.2 Pour deux petites listes on pourrait même imaginer qu'un column-width: max(xx,min(xx,XX); ferait l'affaire.
Je ne comprends pas...

C. la media querie sur un écran de 420px qui règle ton soucis?
OUI, enfin oublie l'écran de 420px, c'est une valeur pour le codepen sans rapport à la réalité.

C.1 il y aurait contradiction avec le min-content avec un tableau qui déborderais et des listes qui se réduirait en largeur pour s'afficher l'une sur l'autre pour ne pas faire déborder la grille.
Je pense que tu vois l'effet sur le codepen.

C.2 Mais si le tableau est déjà d'une largeur inférieur , la grille ne devrait-elle pas déjà être affichée en colonne avant ce point de rupture ?
Dans la réalité c'est une affaire d'esthétique.
Tant que la fenêtre le permet c'est plus joli d'afficher les deux ul sur la même ligne.
mi,n-content se justifie pour éviter qu'il y en ait partout sur les écrans larges.
Modifié par boteha_2 (26 Apr 2024 - 22:42)

Bonjour gcyrillus,

Merci de ta contribution.

J'ai besoin de digérer ton code mais il me semble que tu réponds à ma question.

:root {
  --singleCol: 240px;
  --doubleCol: calc(var(--singleCol) * 2);
}

grid-template-columns: repeat(auto-fit, min(var(--singleCol),var(--doubleCol))

Le gros avantage est que l'effet est obtenu par la connaissance d'une seule valeur : la largeur du grid item.

Avec une media query il faut une deuxième valeur : celle du breaking point qui est à calculer.
C'est ce calcul que je cherche à éviter.

Encore que cela puisse être simplifié par l'emploi de calc () et 100vw auxquels je n'avais pas pensé, comme tu le montres dans le deuxième exemple.

J'adapte tes solutions à ma sauce et je reviens vers vous.

Bonjour,

Je pense pouvoir cocher Résolu.

Encore merci de votre aide.