Addon · golden-grid
Une page sans axe, avec une progression.
Quatre pistes de largeurs inégales, issues de la subdivision récursive du nombre d’or, dont la somme fait exactement 1 — et des marges qui valent φ⁻⁶ de la page. Un élément ne déclare jamais une largeur : il déclare le rôle qu’il joue, et la piste lui donne sa mesure.
La grille, en direct
Ce qui suit est une vraie grille dorée, montée avec les classes émises par le composant. Allumez le tracé, forcez le repli mono-colonne, déplacez le gap le long de l’échelle du site — les quatre fractions, elles, ne bougent pas.
marge
marge
01La dérivation
La page entière vaut 1. On lui applique la coupure dorée, puis on recoupe chacune des deux parties par la même coupure. Les quatre pistes ne sont pas quatre nombres choisis : ce sont les quatre feuilles d’un arbre à deux niveaux.
L’identité qui fait tomber la somme sur 1 est la relation de récurrence, φⁿ = φⁿ⁺¹ + φⁿ⁺². Arrondie à trois décimales, elle tient encore : 0,236 + 0,146 + 0,382 + 0,236 = 1,000. C’est ce qui autorise à écrire les valeurs telles quelles dans la feuille sans rien perdre.
02Les rôles
Un élément ne déclare jamais une largeur. Il déclare le rôle qu’il joue dans la page, et la piste correspondante lui donne sa mesure. Le rail porte les métadonnées et bute à droite contre le vide ; l’épaule reste vide, et c’est elle qui désaxe la page ; le texte tient la mesure de lecture ; le débord est là où les images partent vers la droite.
Ce paragraphe occupe la piste φ⁻² — soit ≈ 53 signes par ligne, sans max-width: 65ch. La mesure n’est pas réglée, elle est déduite : si la page grandit, elle grandit dans le même rapport.
03Le vide
L’épaule est une piste déclarée, dessinée, mesurable. Elle ne peut pas être « récupérée » par un contenu qui déborde, parce qu’aucune classe ne la vise seule. Le tracé de fond la marque un cran plus fort que les autres — c’est une pièce du dessin, pas un repère de développement.
04La marge
Les marges aussi sont dorées : φ⁻⁶ de la page, soit 5,6 %. Pas un cran d’échelle, une part — elles restent donc dorées à toutes les largeurs, et grandissent avec la fenêtre.
Deux unités cohabitent, et c’est la clé : la marge est une part de la page, les pistes sont des parts de la composition. Le « 1 » du nombre d’or n’est pas la fenêtre, c’est ce que les marges et les gaps laissent. Une seule déclaration tient les deux régimes — max(5.6%, calc((100% − 1440px) / 2)) : part dorée tant que la page est étroite, centrage au-delà.
Les gaps, eux, restent sur l’échelle. Il y en a cinq : au terme suivant de la série ils prendraient 403 px sur 1440 et videraient la composition. Le gap n’est pas une division de la page, c’est l’air entre les pistes.
05Le débord
L’aplat ci-dessus part du bord gauche de la colonne de texte et va jusqu’au bord de page. L’alignement n’est cassé que d’un côté : c’est ce qui donne le mouvement sans perdre le repère de lecture.
Contrôle d’alignement · en direct
·· fraction de la page — les autres, de la composition.
Deux largeurs
Les cartes impaires tiennent du rail à l’épaule, les paires du texte au débord. La ligne des vignettes n’est jamais droite.
La coupure elle-même
Posées sur la coupure dorée, les deux cartes d’une rangée ont des largeurs inégales — et c’est le système qui le décide, pas un réglage.
Sans requête média
Chaque carte peut devenir conteneur de requête et rebasculer l’unité fluide d’EVA sur sa propre largeur.
Une réserve
container-type isole les compteurs CSS : un numéro de carte doit venir du gabarit, pas d’un counter-increment.
06Le repli
Sous le point de bascule, toutes les lignes nommées se rabattent sur les deux bords de l’unique piste. Aucune règle de placement n’est réécrite : le rail, le texte et les blocs larges continuent de résoudre, et résolvent tous vers la même colonne. Ajouter un bloc n’oblige donc jamais à écrire sa contrepartie mobile.
07L’activation
Le composant n’est chargé ni par core ni par variables, et l’entrée principale n’émet aucune règle tant qu’il n’est pas activé : une grille dorée est un parti pris de mise en page, pas un défaut raisonnable.
// styles/main.scss @use 'eva-css-fluid' with ( $sizes: (4, 8, 12, 16, 20, 32, 52, 84, 136, 220), $golden-grid: true, $golden-grid-prefix: 'gg-', // recommandé $golden-grid-column-gap: var(--20) ); <!-- html : un rôle, jamais une largeur --> <div class="gg-golden-grid"> <div class="gg-blocks"> <h2 class="gg-rail">Méthode</h2> <p>Le texte tombe sur la mesure de lecture.</p> <img class="gg-spill" src="…" alt=""> </div> </div>
08La règle
Tout conteneur commence et finit sur une ligne de la grille. Aucune largeur en ch, aucune largeur en pixels, aucun margin: auto. La piste est la mesure ; le contenu en ligne coule à l’intérieur.
Cette règle n’a de valeur que parce qu’elle est vérifiable — l’instrument plus haut la mesure sur cette page même, à chaque redimensionnement.
Tout le composant, documenté.
Les lignes nommées, les classes de placement, les douze options, les tokens de gap à l’exécution, le flux éditorial en subgrid et le re-mapping mono-colonne. Le chapitre complet.
Lire la documentation →