[Résolu] Grid layout sans media queries ?

Bonjour,

Après avoir découvert le mot clef auto-fit, j'ai imaginé un système de grille s'affranchisant des media queries au profit du contexte dans lequel la grille est placée.

Mais ce rêve s'est confronté à deux écueils :
- premièrement il faut définir une largeur minimale à la colonne (pour par exemple avoir 4 colonnes max sur grandes résolutions et seulement une colonne sur smartphone), si elle est trop importante l'aspect responsive est invalidé.
- deuxièmement, l'ajout de spans invalide d'autant plus la responsivité de la grille. Si une colonne fait 18em, l'ajout d'un span 2 la fait passer à 36em, et encore sans inclure l'éventuelle gouttière. Que dire si le span est égal à 3 ou 4...

Pour ces deux raisons je définis un media querie en dessous duquel la colonne est moins longue et où les span sont inactifs. Mais je suis obligé de calculer le point de rupture en fonction de telle ou telle page de mon site, ça ne marche pas dans tous les cas.

Exemple en ligne (les grilles avec la classe .grid-auto)

Exemple du code isolé sur un CodePen

Auriez-vous une meilleure alternative ?
Modifié par Olivier C (15 Dec 2022 - 06:00)

Bonsoir,

pour la régle j'irai voir plutôt du coté de min() que minmax().
dans mon humble théorie : grid-template-columns: repeat(auto-fit,min(0,1fr)); par exemple.

Mais il y a un autre soucis : ce sont les span , qui eux ne permettront pas à la grille d'être pleinement 'responsive', car incapable de se réduire à une seule colonne, ou au moins au nombre le plus grand de colonne que l'un des éléments peut squatter.

Je pense que si tu as des élément capable de squatter plusieurs colonnes, alors les médias queries seront de la partie pour gérer ceux la.

Enfin, pour le coté max(), il serait à gérer du coté des éléments enfant directs eux même via un max-width et uniquement pour ceux qui n'occupent qu'une seule colonne ... avec probablement aussi un min-width pour remplir sa cellule. du coup, ce serait l'élement squattant le plus grand nombre de colonne qui déterminera le nombre de colonne de la grille et le min() ne sera de fait pas du tout intuitif.

Cdt
Modifié par gcyrillus (13 Dec 2022 - 21:07)

gcyrillus a écrit :
pour la régle j'irai voir plutôt du coté de min() que minmax().

Si j'applique ta méthode la grille se calera (je crois) sur son contenu ? Ce n'est pas ce que je souhaite. Dans l'idée, c'est d'avoir une grille "auto" calibrée pour 4 colonnes max en fonction de la largeur max du corps de page (ici 92em).

gcyrillus a écrit :
Mais il y a un autre soucis : ce sont les span, qui eux ne permettront pas à la grille d'être pleinement 'responsive', car incapable de se réduire à une seule colonne, ou au moins au nombre le plus grand de colonne que l'un des éléments peut squatter. Je pense que si tu as des élément capable de squatter plusieurs colonnes, alors les médias queries seront de la partie pour gérer ceux la.

C'est bien ce que je craignais. Note que les médias queries sont déjà la solution que j'ai adopté, cela fonctionne sur mes pages calibrées en 92em max, mais si je décidais de réduire cette dimension sur l'une de mes pages cela fait sauter la grille, comme ici par exemple. Dommage, j'espérais être passé à côté d'une spécification.

gcyrillus a écrit :
Enfin, pour le coté max(), il serait à gérer du coté des éléments enfant directs eux même via un max-width et uniquement pour ceux qui n'occupent.

Là je suis fatigué, j'ai pas tout compris, je regarderais à tête reposé.

___
PS : au fait, je tombe régulièrement sur d'anciens posts à toi (plein de pertinence) sur stackoverflow. Longue vie et postérité !
Modifié par Olivier C (14 Dec 2022 - 15:45)

voici un exemple https://codepen.io/gc-nomade/pen/LYrKjKq si cela t'aide à voir les effets

Du coup, si tu souhaites une base de quatre colonnes, alors un pseudo depuis la grille qui squatte 4 colonnes devrait te donner le nombre minimale de colonnes à appliqués : https://codepen.io/gc-nomade/pen/bGKPodg ... du coup => pas d'éléments qui squattent plus de 4 colonnes à mettre dans la grille.
Modifié par gcyrillus (13 Dec 2022 - 21:31)

Merci à toi cyrillus,

Je vois qu'il n'y a pas de solution miracle, je vais prendre le temps de manipuler tout ça.

Bonne soirée.

Je relance mon propre sujet, car j'avais du temps à tuer et j'ai lu les spec' : il y a peut-être une voie à creuser du côté de @container.

Voir une réflexion de MDN sur le sujet ici : CSS Container Queries.

Évidemment, tout ça n'est pas encore très bien supporté, mais mon template est prévu pour être mis en ligne dans un an au moins, alors j'ai le temps de voir venir... Si j'arrive à quelque chose de concluant je ferai un retour ici même.

Olivier C a écrit :
Je relance mon propre sujet, car j'avais du temps à tuer et j'ai lu les spec' : il y a peut-être une voie à creuser du côté de @container.

Du coup on retombe sur un systeme similaire a media queries ou il faut réadapter en fonction d'une largeur dispo
De mon humble point de vue la question est similaire, comment passer outre en n'ayant qu'un simple grid-template-columns? Si j'ai compris, c'était ta question initiale . flex pourrait sur un un seul et unique axe à la fois. grid ne sait pas faire à ce que j'ai réussi a en comprendre.
Cdt
Modifié par gcyrillus (02 Jan 2023 - 22:41)

Olivier C a écrit :
Je relance mon propre sujet, car j'avais du temps à tuer et j'ai lu les spec' : il y a peut-être une voie à creuser du côté de @container.

Hello,

Les Container Queries sont effectivement plus logiques à l'usage que les Media Queries et il devient possible de modeler ta grille selon l'espace disponible dans le parent : https://codepen.io/raphaelgoetter/pen/MWXMPLz

Sans @container, la limite de "auto-fill" et "auto-fit" dans Grid Layout est que les colonnes devront toujours être de taille identiques et se répartir dans tout l'espace.

Si tes contraintes sont :
1- du Responsive (passer de 1 à X colonnes)
2- selon la taille disponible dans le parent
3- avec des colonnes de tailles différentes (par ex la taille de leur contenu)
4- sans te servir de @container
... alors Flexbox reste une meilleure solution selon moi : https://codepen.io/raphaelgoetter/pen/rNKxpEz?editors=1100

C'est super interressant, je vois que j'étais sur la bonne piste mais je me suis entravé en gardant le mot-clef auto-fit...

Pour autant je n'arrive pas à saisir l'approche @container, je vous livre un code qui n'est pas fonctionnel, mais qui vous donnera l'idée de ce que je souhaiterais faire :

.grid-auto {
  container-name: grid-auto;
  container-type: inline-size;
}
.grid-auto {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
}
@container grid-auto (min-width: 20em) {
  .grid-auto {
    --n: 2;
  }
}
@container grid-auto (min-width: 40em) {
  .grid-auto {
    --n: 3;
  }
}
@container grid-auto (min-width: 60em) {
  .grid-auto {
    --n: 4;
  }
}

L'exemple en ligne : CodePen
Modifié par Olivier C (05 Jan 2023 - 10:13)

Oh c'est super ! J'ai testé avec différentes valeurs de largeurs et c'est ok, ça fonctionne. J'avais vu passer un commentaire à ce sujet sur un forum (Stack Overflow ?) mais je n'avais pas tilté... Maintenant, avec ça on a un peu d'avance, il faudra prévoir quelques fallbacks. Mais c'est pour dans un 1 an au moins.

Tant qu'à être trop en avance on pourra se permettre de cibler le parent ainsi :

:has(> .grid-auto)

Et en faisant cela on s'interdit un support par Firefox qui, déjà, ne prendra @content qu'à partir de la version 109, on pourra toujours créer un petit polyfill en JavaScript en attendant :

document.querySelectorAll('.grid-auto').forEach(grid => grid.parentElement.classList.add('parent-grid'))

Ce qui nous ferait :

:has(> .grid-auto),
.parent-grid { /* ".parent-grid" : fallback JS */
  container: grid-auto / inline-size;
}

PS : j'ai constaté un bug avec le préprocesseur Stylus, je leur ai écris une issue.
PS2 : modification du titre du topic pour refléter plus justement les sujets abordés.
Modifié par Olivier C (06 Jan 2023 - 05:49)

Il arrive que, parfois, je promette de faire un retours sur un sujet... et que j'oublie. Cette fois-ci je reviens... Comme je me suis bien amusé à expérimenter je vais vous faire part ici de mes trouvailles. Donc :

Trois démos fonctionnelles de grilles avec les modules CSS Grid Layout, Container Queries et les opérateurs logiques (Media Queries Level 4) :
- Un ensemble de grilles de démonstration
- Une galerie d'images (avec un effet "Masonry" maison)
- Un formulaire complet
Tout cela est expérimental... mais fonctionnel. J'ai prévu une feuille de style pour les navigateurs ne supportant pas @container :

const supportsContainerQueries = 'container' in document.documentElement.style
if (!supportsContainerQueries) getStyle('/styles/gridFallback.css', 'screen')

Une partie du code de base (la totale ici : Github) :

:has(> [class^=grid]),
.parent-grid {
  container: grid / inline-size;
}

[class^=grid] {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
}

/* ... */

@container grid (50em < width) {
  .grid3,
  .grid4 {
    --n: 3;
  }
  .c3,
  .c4 {
    grid-column: span 3;
  }
}

edit maj des lien sans localhost
(edit de l'edit : Bien vu !)
Modifié par Olivier C (26 Jan 2023 - 07:08)

Merci beaucoup, ça m'a beaucoup aidé