Le piège de la mise en page : ratios d’aspect et grilles CSS

Les marketplaces de templates listent masonry, bento et justified comme des puces de style équivalentes. Elles ne le sont pas. Masonry et justified gardent tous deux les ratios natifs, mais ils packent différemment, et le bento vit en général sur une page conçue, pas comme un skin de galerie drop-in pour tout un portfolio.

Les forums se remplissent de batailles CSS custom contre le comportement de crop d’une plateforme. Cette énergie vise en général la mauvaise couche. Commencez par nommer quelle famille de mise en page vous voulez, puis demandez si le moteur peut honorer les ratios natifs ou doit inventer un crop.

Sous le capot, deux approches courantes apparaissent. CSS Grid avec un aspect-ratio explicite (et parfois grid-auto-flow: dense) verrouille les tuiles dans une géométrie partagée : le navigateur connaît la boîte avant que l’image peigne, c’est pourquoi les grilles cropped semblent stables et pourquoi les crops « faux » semblent intentionnels plutôt qu’accidentels.

Les mises en page justified basées sur flex font le job inverse : elles mesurent les ratios intrinsèques des images, puis résolvent une hauteur de ligne partagée pour que la ligne remplisse la largeur du conteneur sans grands trous. Masonry laisse libres les hauteurs de colonnes. C’est pourquoi un set street peut garder ses cadres, et pourquoi une démo desktop à quatre colonnes s’effondre souvent en une seule colonne maladroite sur téléphone si les breakpoints n’ont jamais été conçus.

Vous n’avez pas besoin d’expédier le CSS vous-même. Vous avez besoin d’une plateforme dont le moteur portfolio est explicite sur le modèle qu’elle fait tourner, au lieu d’un thème qui croppe sur desktop et redispose de façon imprévisible sur mobile.

Un masonry à quatre colonnes qui paraît éditorial sur un laptop marketing devient souvent une longue pile verticale sur un téléphone. Cela peut aller si gouttières, densité de légendes et cibles de tap ont été conçus pour cette pile. La plupart des démos de templates cachent l’échec en ne montrant jamais le téléphone.

Les grilles cropped survivent en général mieux au rétrécissement pour le scan, mais la fenêtre de crop change : un crop de visage sûr sur desktop peut perdre les yeux ou les bords produit quand le même ratio siège dans une colonne plus étroite. Prévisualisez la famille de mise en page à largeur téléphone avant d’y engager une série publique.

Les mises en page immersives (split stage, book, carousel) et les modèles chronologiques (timeline, journal) redisposent encore autrement (stage au-dessus du rail, vidéo portrait plafonnée en hauteur dans le journal), donc « empiler la grille » n’est pas la seule histoire mobile.

La raison derrière la recommandation compte plus que le label. Les packs qui préservent le ratio favorisent le travail où le cadre est le point. Les crops uniformes favorisent le travail où comparaison et vitesse comptent. Le bento de page et les héros full-bleed favorisent le travail où quelques images doivent mener.

Les mises en page portfolio d’ArtInStack sont des familles de présentation que vous choisissez exprès : grille carrée, masonry et justified sur les pages portfolio publiques, plus des modèles de parcours immersifs et chronologiques quand le set demande un autre ordre de lecture. Le bento de l’éditeur de pages sert la hiérarchie conçue sur une page de site, pas un troisième skin de galerie pour le même job.

Une caveat pratique : justified sur une page publique `/portfolio` n’est pas la même chose que chaque embed de page. Les embeds Image Portfolio mappent actuellement justified vers une grille uniforme, donc prévisualisez la surface que vous publierez vraiment.

Couplez cela aux choix de livraison : à quel point chaque tuile est nette et lourde appartient à Résolution vs performance pour les images portfolio. Si le motion mène la page, voir Présentation portfolio video-first.