Colonnes fixes ou fluides

Prenez une page que vous jugez bien construite et faites glisser lentement la fenêtre du navigateur, du large vers l’étroit. Observez ce qui bouge. Les colonnes se compriment, absorbant chaque pixel que vous retirez — mais les gouttières qui les séparent restent immobiles, tout comme les marges sur les bords. Puis, quelque part autour d’une largeur d’appareil, la mise en page bascule d’un coup : douze colonnes deviennent huit, et la compression repart depuis une colonne plus large. Ce rythme de flexion-lente-puis-bascule, c’est la question du fixe ou fluide, déjà tranchée.

Dans le modèle de grille qu’utilisent la plupart des mises en page modernes, les colonnes sont fluides — des pistes 1fr qui absorbent les variations de la fenêtre d’affichage — tandis que les gouttières et les marges restent fixes à l’intérieur de chaque palier de point de rupture. Une grille fixe ou fluide n’est donc que rarement un choix tout ou rien : la vraie question est de savoir laquelle des trois largeurs se déforme, et la réponse habituelle est : les colonnes seulement.

Cet article traite de cette répartition des rôles, des deux alternatives honnêtes aux extrêmes — tout fixe, tout fluide — et de la façon dont les colonnes fluides interagissent avec les points de rupture, avec les chiffres d’un palier calculés aux deux bornes de sa plage. C’est la couche de décision de conception de la grille de mise en page ; le CSS qui l’implémente vit ailleurs dans le groupe.

Quelles parties d’une grille doivent se déformer ?

Une grille, ce sont trois largeurs — colonnes, gouttières, marges — et elles méritent un traitement différent parce qu’elles remplissent des rôles différents.

Gouttières fixes. La gouttière, c’est le rythme : l’intervalle répété qui fait lire les colonnes comme une même famille. Laissez les gouttières varier avec la fenêtre d’affichage et l’espacement entre les éléments se met à respirer de façon imprévisible — les deux mêmes colonnes sont distantes de 24px sur un écran et de 31px sur un autre, et le système d’espacement de la page cesse discrètement d’en être un. L’espacement est proche de l’identité : c’est l’une des choses à quoi un lecteur reconnaît une mise en page, alors il reste immobile.

Marges fixes par palier. La marge, c’est le cadre. Un cadre qui grandit et rétrécit en continu se lit comme une instabilité au bord de la page ; un cadre qui tient à 16px sur téléphone et augmente par paliers à des largeurs connues se lit comme un passe-partout délibéré autour du contenu.

Colonnes fluides. Les colonnes, c’est là que vit le contenu, et les zones de contenu sont élastiques d’une manière que l’espacement n’est pas — un paragraphe ne se lit pas très différemment avec 68px de largeur en plus, mais une gouttière qui vacille visiblement se remarque. Les colonnes encaissent donc toute la variation : les membres fixes sont retirés d’abord, et les pistes 1fr se partagent ce qui reste. Fluide voulait autrefois dire de l’arithmétique de pourcentages faite à la main — des largeurs de colonnes en décimales durement gagnées comme 8,333 %. L’unité fr a déplacé cette arithmétique dans le navigateur, qui exécute désormais la division du reste en direct à chaque largeur de fenêtre.

À quoi ressemble une grille entièrement fixe ?

L’alternative héritée de l’imprimé : colonnes, gouttières et marges toutes fixes, l’ensemble de la surface étant une quantité connue, et la largeur restante de la fenêtre déversée dans les marges extérieures par centrage. C’est ainsi que fonctionnaient les premières mises en page web (l’époque des 960px), et elle survit là où ses vertus s’appliquent encore — documents, applications de lecture, tout ce dont l’idéal est « la même page à chaque fois ». Une largeur de composition fixe est réellement bonne pour les textes longs : la longueur de ligne ne dérive jamais hors de la plage confortable.

Le coût, c’est l’espace entre les points de rupture. À une fenêtre de 1100px, une mise en page fixe de 960px laisse 140px de marge morte que ni le contenu ni le cadre n’utilisent ; chaque fenêtre située entre deux tailles de conception hérite de la plus petite conception, plus du gaspillage. Les grilles fixes échangent l’adaptation contre la certitude, et l’échange ne paraît équitable que là où la certitude est le produit.

À quoi ressemble une grille entièrement fluide ?

L’extrême opposé supprime entièrement le plafond du conteneur : les colonnes se déforment à chaque largeur, sans borne supérieure. Tableaux de bord, tableaux, éditeurs et autres applications à forte densité de données utilisent réellement la largeur — un moniteur de 2560px affichant davantage de colonnes d’un visualiseur de journaux est une fonctionnalité, et le plafonner gaspillerait la ressource la plus littérale de l’utilisateur : les pixels.

Les coûts apparaissent dès qu’il y a du texte : des colonnes non plafonnées signifient des longueurs de ligne non plafonnées, et des contrôles qui vont ensemble s’éloignent à mesure que l’espace entre eux s’étire. Faut-il plafonner ? En une phrase, c’est l’axe application contre document — les interfaces qui utilisent la largeur restent non plafonnées, les pages qui se lisent reçoivent un conteneur — et le dimensionnement du conteneur lui-même est un sujet à part.

Comment les colonnes fluides interagissent-elles avec les points de rupture ?

Le rythme responsive standard, c’est la combinaison des deux mécanismes : les colonnes se déforment entre les points de rupture, le nombre de colonnes change à leur niveau. À l’intérieur d’un palier, le navigateur redivise en continu la largeur restante ; à la frontière du palier, la largeur accumulée est réinvestie dans davantage de colonnes et chaque colonne se réinitialise à une largeur plus étroite. Se déforme, bascule, se déforme.

La vue grille de Scale Composer rend l’« entre » visible parce que chaque point de rupture a deux largeurs : la largeur minimale où commence le palier, et une largeur d’aperçu que vous pouvez fixer n’importe où dans la plage du palier. Le palier tablette par défaut va de 768px à 1199px — chaque largeur dans cette bande est la même grille à huit colonnes, juste avec des colonnes plus ou moins larges.

Redimensionnez le palier tablette sur toute sa plage dans Scale Composer — mêmes colonnes, mêmes gouttières de 24px, mêmes marges de 29px ; seule la largeur de colonne bouge.

De combien une colonne se déforme-t-elle réellement ?

Prenez le palier tablette par défaut — 8 colonnes, gouttières de 24px, marges de 29px — et calculez la largeur de colonne aux deux bornes de sa plage 768–1199px. Les membres fixes sont retirés d’abord : marges 2 × 29 = 58px, gouttières 7 × 24 = 168px, donc les colonnes se partagent ce que la fenêtre laisse.

Une colonne tablette double presque sur son propre palier — de ≈67,8px à ≈121,6px — tandis que chaque gouttière et chaque marge tient au pixel près. Puis la frontière du bureau arrive et l’arithmétique se réinitialise : douze colonnes, marges plus larges, et la largeur de colonne rebascule à 67px. La flexion absorbe ; la bascule réinvestit. Voilà tout le rythme responsive en un seul tableau.

Désactivez le plafond et sentez la différence

La dernière décision — document plafonné ou application non plafonnée — est plus facile à prendre après avoir vu les deux sur la même grille. La largeur maximale du conteneur, dans la vue grille, peut être désactivée : activée, le palier bureau cesse de grandir à 1200px et les marges prennent le relais ; désactivée, les douze colonnes continuent de se déformer aussi large que va la fenêtre. Activez ou désactivez le plafond du conteneur sur la même grille dans Scale Composer.