Snook a publié un article intitulé «Overlapping Header with CSS Grid» dans lequel il examine un modèle de conception d'en-tête qui, selon moi, transcende les tendances et est populaire depuis toujours. L'idée est que l'en-tête est surdimensionné et que la zone de contenu principale s'y glisse et chevauche l'arrière-plan de l'en-tête. Il y a juste quelque chose de gentil et de réconfortant à ce sujet.
Mon esprit va au même endroit que Snook:
Historiquement, je l'ai fait avec des marges négatives. L'en-tête a une hauteur qui ajoute un tas de rembourrage en bas, puis le corps obtient un
margin-top: -50pxou ce que la conception demande.
Mais ensuite, il décide de le faire avec la grille CSS à la place! Intéressant. Pourquoi? Eh bien, c'est dans cela que nous allons entrer. La grille peut simplement se sentir (et être) plus solide. La grille peut également être plus flexible. Par exemple, max-heightet les automarges sont excellentes pour le centrage, mais que faire si vous voulez des gouttières inégales sur les bords? Ce serait difficile là-bas et facile avec Grid. Ethan Marcotte a écrit:
Plutôt que de simplement
max-widthutiliser par défaut une contrainte, je peux utiliser l'espace vide autour de ma conception et la traiter comme un outil de mise en page.
J'essaie de faire de l'ingénierie inverse de l'idée de Snook dans cette vidéo puis de la comparer à mon résultat final.
- Snook's
- Mine (nettoyé une post-vidéo smidge pour l'esthétique)