La Grille Magique

Aucun breakpoint. beaucoup moins de media query.
Ça marche sur tous les écrans.

Personne ne sait que ça existe

Tout le monde est encore en mode hacking stuff. On écrit 500 lignes de CSS grid (oui oui je le pense vraiment). On défini 7 breakpoints. On test sur 12 tailles d'écran. Et c'est toujours cassé quelque part.

Il y a une autre façon. Ça tient en 1 ligne. Ça marche sur téléphone, tablette, ordinateur, télévision, frigo connecté. Tu ne l'écris qu'une fois. Et tu n'y touches plus jamais.

flex: 1 1 min(100%, 260px);

C'est tout. C'est la ligne la plus puissante du CSS. Et personne ne l'utilise.

Démonstration

Redimensionne la fenêtre. Essaye sur téléphone. Essaye sur un écran 4k. Ça s'adapte tout seul. Pas de code supplémentaire.

Cartes avec contenu réel

Titre carte 1

Ceci est un contenu normal qui tient dans une carte. Ça marche avec n'importe quelle hauteur.

Titre carte 2

Une carte avec plus de contenu. Ça s'adapte automatiquement. Toutes les cartes gardent la même hauteur.

Et même avec plusieurs paragraphes.

Titre carte 3

Petite carte.

Titre carte 4

Ceci est un contenu normal qui tient dans une carte. Ça marche avec n'importe quelle hauteur.

Titre carte 5

Une carte avec plus de contenu. Ça s'adapte automatiquement.

Titre carte 6

Dernière carte.

Et si tu veux changer l'espacement ?

Tu ne changes rien d'autre que le gap. C'est tout.

gap: var(--s-2); /* 16px */
gap: var(--s-3); /* 32px */
gap: var(--s-4); /* 64px */

Démonstration gap 16px

1
2
3
4

Démonstration gap 64px

1
2
3
4

Et avec tes cartes à couleurs ?

Ça marche aussi évidemment. La même règle s'applique à n'importe quel élément.

BASE
Ça marche
ANALOGUE
avec absolument
COMPLÉMENT
tous tes
TRIADIQUE
composants

Aucune modification. Tu ajoutes juste flex: 1 1 min(100%, 180px); sur tes éléments existants. C'est tout.

Ça met automatiquement le bon nombre de cartes par ligne. Si l'écran est petit : 1 colonne. Moyen : 2 colonnes. Grand : 3 colonnes. Très grand : 4, 5, 6 colonnes.

Tu n'as rien à faire. Le navigateur calcule. Il sait mieux que toi combien de cartes ça tient.

Le code final complet

Accroche toi un peu, je sais que je n'explique pas toujours très bien. Mais je pense que quand c'est compris, la magie opère vraiment.

Pas d'imagination. Pas de truc caché. Voilà exactement ce que tu écris. Tout. Pas plus.

D'abord les variables de base. Tu les as déjà définies sur la page rythme. Ce sont exactement les mêmes. Rien de nouveau.

:root {

/* #region OKLCH */
--h-brand: 330;
--l-action: 85%;
--c-neon: 0.35;

--clr-brand: oklch(var(--l-action) var(--c-neon) var(--h-brand));
--clr-analogue: oklch(from var(--clr-brand) l c calc(h + 45));
--clr-complementaire: oklch(from var(--clr-brand) l c calc(h + 180));
--clr-triadique: oklch(from var(--clr-brand) l c calc(h + 210));

--clr-bg: oklch(97% 0.01 90);
--clr-surface: oklch(100% 0 0);
--clr-text: oklch(0% 0 0);
--clr-border: oklch(0% 0 0);
/* #endregion */

/* #region RYTHME */
--step: 8px;

--s-1: calc(var(--step) * 1);
--s-2: calc(var(--step) * 2);
--s-3: calc(var(--step) * 4);
--s-4: calc(var(--step) * 8);

--base: 1rem;
--ratio: 1.25;
/* #endregion */

/* #region GRILLE */
display: flex;
flex-wrap: wrap;
gap: var(--s-3);

.grid > * {
flex: 1 1 min(100%, 260px);
}
}

/* #endregion */

Ensuite la grille. Deux sélecteurs. Cinq lignes au total.

.grid {
display: flex; /* passe en mode flexible */
flex-wrap: wrap; /* met à la ligne automatiquement */
gap: var(--s-3); /* espace entre les éléments */
}

.grid > * {
/* s'applique à TOUS les enfants directement. Pas besoin de classe */
flex: 1 1 min(100%, 260px);
}

Tu écris ça une seule fois dans ton fichier CSS principal.

Et ensuite dans ton HTML :

section class="grid" qui a la définition gap: var(--s-3)"
div class="color-card">...
div class="color-card">...
div class="color-card">...
div class="color-card">...
/section

Tu ajoutes la classe grid sur le conteneur. C'est tout. Tu ne changes rien aux éléments à l'intérieur. Tu ne changes rien à tes composants existants. Ça marche avec absolument tout.

C'est fini.
Ça marche sur tous les écrans.
Ça marche avec n'importe quel contenu.
Ça marche avec les cartes de la page contraste.
Ça marche avec des boutons.
Ça marche avec des images.
Tu n'écris plus jamais de CSS de grille.

Hiérarchie et ordre

1

Le conteneur

display: flex passe en mode flexible. flex-wrap: wrap dit que les éléments vont à la ligne quand il n'y a plus la place. gap c'est l'espace entre les éléments.

2

Les enfants

La règle s'applique à TOUS les enfants directement. Pas besoin de classe sur les éléments. Pas besoin de rien. Tu met ce que tu veux dedans.

Les réglages

Il n'y a que DEUX valeurs que tu peux changer. Pas plus.

gap: var(--s-1); /* 8px - très serré */
gap: var(--s-2); /* 16px - normal */
gap: var(--s-3); /* 32px - confortable (j'aime bien) */
gap: var(--s-4); /* 64px - aéré */
min(100%, 200px); /* petites cartes / icônes */
min(100%, 260px); /* cartes normales (j'aime bien) */
min(100%, 320px); /* contenu texte */
min(100%, 400px); /* grandes cartes / images */

Ce sont les deux seuls curseurs. Tu ne touches à rien d'autre. Jamais.

Comment ça marche ?

display: flex;
flex-wrap: wrap;
gap: 32px;

D'abord on dit que les éléments vont à la ligne quand il n'y a plus la place.

min(100%, 260px)

C'est le truc magique. min() prend la plus petite valeur entre les deux. Donc :

flex: 1 1 [valeur];

Et ensuite on dit : "Tu peux grandir si il y a de la place. Tu peux rétrécir si il n'y en a plus. Mais tu ne descendras jamais en dessous de ce que j'ai dit."

C'est tout. Pas de magie. Juste du CSS qui existe depuis au moins avant les dinosaures (au moins je te dis!).

Pourquoi personne ne l'utilise ?

Parce que tout le monde a appris `display: grid`. Parce que tous les tutos montrent les breakpoints (au début cela fait tricks de fou c'est vrai). Parce que tous les frameworks font comme ça. Parce que personne n'a pris 5 minutes pour lire la documentation de flexbox.

faire une grille = utiliser la propriété `display: grid`

Alors que c'est complètement faux. Une grille c'est juste des éléments alignés en lignes et colonnes. Ça existait 10 ans avant `display: grid`.

Le truc le plus drôle dans l'histoire: on ne fait pas de grille avec `display: grid`. On fait des tableaux. La vrai grille c'est ça. Celle là. Avec flex.

Il y a juste une limite : ça ne marche pas si tu veux absolument toujours exactement 3 colonnes peu importe la taille de l'écran.

Mais si tu veux toujours exactement 3 colonnes même sur un écran de téléphone de 320px, c'est que tu fais de la merde de toute façon (pardon mais c'est vrai à la fin quoi).

Les règles

1

Tu choisis une seule taille minimum

260px c'est parfait pour des cartes. 320px c'est parfait pour du contenu. Pas autre chose.

2

Jamais de largeur maximum

Si il y a de la place, les éléments grandissent. C'est normal. C'est ce que veulent les utilisateurices. A la limite pour le container moi j'ai mis une limite à 1200px pour l'accessibilité.

3

Jamais de justify-content: center

Si tu centres la dernière ligne est cassée. Laisse les éléments sur la gauche. C'est mieux contre les effets dyslexiques aussi.

Conclusion

Tu peux supprimer beaucoup (tout?) du code CSS de tes grilles. Tu peux supprimer tous tes media queries. Tu peux supprimer Tailwind (bye bye presque copain). Tu peux supprimer Bootstrap (de toute façon je t'ai jamais aimé).

Une ligne. Ça marche partout. Ça marchera toujours.

Et personne ne te dira merci.