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

Bonjour,

Parent avec max-width: min-content

Dans ce parent j'ai un GRID avec column en auto-fit avec deux éléments.

Et disons plus bas une TABLE dont la largeur est inférieure à celle des deux éléments cumulés du GRID..

Logiquement les éléments du GRID s'affichent l'un au dessus de l'autre.

Mais j'aimerais qu'ils s'affichent l'un à côté de l'autre tant que la taille de la fenêtre le permet.

Si j'emploie auto-fit c'est pour être responsive quand la fenêtre devient trop étroite.

Avant de passer en GRID les deux éléments étaient en display: inline-block à l'intérieur d'un DIV avec white-space: nowrap soumis à @media screen and (min-width: 1050px).
Et cela marchait.comme voulu : l'un à côté de l'autre tant que la taille de la fenêtre le permet.

Mais avec une media-query dont j'aimerais pouvoir me débarrasser car en réalité toutes les largeurs peuvent changer d'une page à l'autre et en dehors du contenu des ul aucune largeur n'est définie en dur.

Avant :

<div> // max-width: min-content
<div> // white-space: nowrap soumis à media screen and (min-width: 1050px)
<ul> // inline-block
<ul> // inline-block
</div>
<table>
</div>

Après :

<div> // max-width: min-content
<div> // GRID auto-fit
<ul>
<ul>
</div>
<table>
</div>

J'espère que c'est assez clair.

Merci d'avance de votre aide.
Modifié par boteha_2 (23 Apr 2024 - 21:14)

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.

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,

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,

Je comprend mieux,
min(xx,max(xx,XX)) et calc() pourrait permettre de faire ou de s'approcher de ce que vous voulez sans médiaqueries, (pas sur que cela soit mieux, mais jouons le jeux ) , mais il nous faut quand même une valeur pivot arbitraire.

La largeur d'une colonne peut servir à faire quelques calculs de comparaison. (le point B.2 désolé , voir https://developer.mozilla.org/fr/docs/Web/CSS/min et https://developer.mozilla.org/fr/docs/Web/CSS/max )

L'idée est de forcer la grille à avoir une largeur minimale en fonction de la largeur d'écran et d'une largeur de colonne tout en remplissant son conteneur par défaut.

grid, flex ou column CSS n'ont pas vraiment d'importance à mon avis, il dépendront de l'espace allouer.(le point B méritait d'être le point A, ce n'est pas un probléme de grille )
Codepen démo de l'idée : https://codepen.io/gc-nomade/pen/WNWmWaX Cela ressemble à ce que j'en ai compris. la largeur de colonne est passé dans une variable CSS pour faciliter les tests et réglages. Ce n'est pas encore tout à fait ça, mais ça redonne quelques pistes.

cdt
Modifié par gcyrillus (27 Apr 2024 - 13:03)

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.

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ta contribution.

C'est l'idée du forum

boteha_2 a écrit :

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..

Attention, les 3 exemples reçoivent les mêmes règles de largeurs :

main {
  max-width: min-content;
}
section,
article,
div{
  min-width: min(
    var(--doubleCol),
    max(
           var(--singleCol), 
           calc(100vw - var(--doubleCol))
    )
  );
  width: 100%;
}

J'oubliais aussi de préciser que lorsque calc(100vw - var(--doubleCol)) devient une valeur négative, cela rend invalide la règle min-width.

Cordialement
Modifié par gcyrillus (27 Apr 2024 - 18:33)

Bonjour

J'ai adopté ton code dans mon codepen et cela fonctionne comme attendu.

Je réfléchis : cela présente-t-il des inconvénients par rapport à une media query ?

Bonjour,

Je pense pouvoir cocher Résolu.

Encore merci de votre aide.