[Résolu] Responsive sans Media Queries pour 2 colonnes

Bonjour,

Dans son livre sur Grid Raphaël donne un exemple de galerie d'images fluide sans Media Queries (TP 7).

grid-template-colums: repeat (auto-fit, minmax(250px, 1fr))

Le nombre de colonne s'adapte automatiquement à la taille de l'écran.

Mon problème est que je dois être limité à deux colonnes quand l'écran est assez grand, puis passer en une colonne.

Il s'agit d'un bloc de boutons, actuellement dans une table, voir le codepen

Pour compliquer un peu les choses la largeur des éléments est définie par leur contenu.

Merci de votre aide.
Modifié par boteha_2 (07 May 2023 - 21:05)

Bonsoir,

CSS peut faire les deux, mais pas en même temps

auto-fill ou fit en grid, ne permet pas de déterminer un nombre de colonnes maximum , CSS column peut s'en passer en n'indiquant qu'une largeur (approximative) et tout deux auront besoin d'un max-width pour palier au mediaqueries que tu ne veut pas.

rapidement et pas bien pensé, voici quelques exemples pour donner des idées de départ : https://codepen.io/gc-nomade/pen/abRqVRM mais la seule façon qui tiendra la route c'est avec des mediaqueries à mon humble avis avec grid ou un tableau .

Les mediaqueries passent partout ... sauf cas rare, je suis surpris que tu veuilles en faire l'impasse. (firefoxe me propose de corrigé l'orthographe de mediaqueries en merd@...ue! , aucun rapport j'imagine )

cdt

Bonjour,

Merci de votre suivi.

gcyrillus a écrit :
Les mediaqueries passent partout ... sauf cas rare, je suis surpris que tu veuilles en faire l'impasse

Je n'ai rien contre les Media Queries, je les utilise beaucoup.
Mon problème est que comme la largeur est définie par le contenu je ne la connais pas.
Mais comme le contenu est connu la largeur peut être mesurée, je suppose, et indépendante du navigateur.
Pas besoin de faire le calcul dynamique avec JS, je mesure la largeur et crée la media querie au pixel près.
Je pense que c'est la piste la plus sûre.

Cela dit ce pourrait être un développement intéressant de GRID, une sorte de wrap pour apssage à la ligne si manque de place.

parsimonhi a écrit :
Il me semble que la propriété css columns fait très bien ça.

Je connais cette propriété très intéressante.

Mais là cela ne me semble pas adapté à cause des cellules vides que j'ai besoin de supprimer dans le passage en une colonne.

boteha_2 a écrit :
Bonjour,

Merci de votre suivi.

....
Cela dit ce pourrait être un développement intéressant de GRID, une sorte de wrap pour apssage à la ligne si manque de place.


... CSS column
Je connais cette propriété très intéressante.

Mais là cela ne me semble pas adapté à cause des cellules vides que j'ai besoin de supprimer dans le passage en une colonne.

Ces deux là ont cette incompatibilité similaire pour ton cas. (que j'ai essayé de démontré dans le codepen approximatif )
* impossible de réduire à 2 colonnes maximum (sauf à utilisé un mediaquerie ou un max-width approximatif)
* l'obligation de données au mieux une largeur minimale aux colonnes (largeur à la louche)

Quelle pistes te restent t-il ?
Les mediaqueries et grid ou un tableau en switchant le nombre de colonne(grid) ou display.

Une autre piste peut-être un tableau ou un grid de 2 colonnes en width:max-content et une pointe de javascript qui compare la largeur de la grille et la largeur disponible au chargement de la page (le onresize n'est pas forcement nécessaire). https://codepen.io/gc-nomade/pen/QWZQzYz
Dans l'exemple, j'y ajoute un container querie qui pointe le bout de son nez :

/* CONTAINER QUERIE  de l'exemple linker similaire au js*/
.parent {
  container: parent / inline-size;
}
@container parent (max-width: 350px) {
  div.grille {
    grid-template-columns: auto;
  }
}

C'est prometteur :
support actuel : https://caniuse.com/css-container-queries
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Cdt
Modifié par gcyrillus (08 May 2023 - 14:47)

gcyrillus,

Merci pour ces nouvelles pistes, c'est très intéressant.

Mais comme je peux mesurer la largeur du tableau, même si aucune largeur n'est fixée, je penche plutôt pour la piste d'un GRID avec media queries.

Je m'y mets dès que j'ai le temps, je vous tiens informés.