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é.
25721 shaares