L'auteur analyse et améliore la section "hero" du site Time.com, critiquant notamment le passage trop précoce à un affichage mobile (1 colonne) qui gaspille l’espace disponible sur les écrans intermédiaires. Il propose une approche plus flexible et progressive, en utilisant des techniques CSS modernes : CSS Grid, container queries, display: contents, style queries, grid areas, et le sélecteur :has() pour créer un layout adaptatif et dynamique. L’objectif est de laisser le contenu guider la mise en page, avec des transitions fluides entre 1, 2 et 3 colonnes, tout en optimisant l’espace et la lisibilité. L’article illustre aussi l’utilisation des query units (cqw) pour des tailles de police fluides et des astuces comme text-wrap: pretty pour équilibrer les titres. Une démonstration concrète de comment construire des layouts robustes et modulaires avec du CSS avancé.
L'auteur explique l'importance d'avoir une organisation spatiale cohérente, notamment quand on crée un "design system" : marges, dimensions, taille des composants... Il poursuit en décrivant ce qu'est une grille et en donnant quelques exemples.
Des équivalents flexbox de dispositions en grille
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre (via https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-33 )
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Vivement que les navigateurs se mettent au niveau...
Tout est dans le titre (via http://blog.stephaniewalter.fr/la-semaine-en-pixels-18-decembre-2015/ )
Tout est dans le titre
Susy est une extension de Sass, spécialisée dans les grilles. Elle permet de s'affranchir des calculs fastidieux assez facilement, comme le montre l'auteur dans l'article
Des exemples simples pour le module "mise en page par grilles" de CSS3
Tout est dans le titre (via inpixelwetrust)
Une grille CSS apparemment différente
Un générateur de grilles pour designs web adaptatifs