Snook ha pubblicato un articolo intitolato "Overlapping Header with CSS Grid" in cui esamina un modello di progettazione di intestazioni che ritengo trascenda le tendenze ed è stato popolare da sempre. L'idea è che l'intestazione sia sovradimensionata e l'area del contenuto principale si insinui in essa e si sovrapponga allo sfondo dell'intestazione. C'è solo qualcosa di carino e confortante in questo.
La mia mente va allo stesso posto in cui fa Snook:
Storicamente, l'ho fatto con margini negativi. L'intestazione ha un'altezza che aggiunge un po 'di imbottitura al fondo e quindi il corpo ottiene un
margin-top: -50pxo qualunque cosa il design richieda.
Ma poi decide di farlo invece con la griglia CSS! Interessante. Perché? Bene, questo è ciò in cui entreremo. Grid può sembrare (ed essere effettivamente) più robusto. La griglia può anche essere più flessibile. Ad esempio, max-heighte automargini sono grandi a centratura, ma cosa succede se si desidera grondaie irregolari sui bordi? Sarebbe difficile lì, e facile con Grid. Ethan Marcotte ha scritto:
Piuttosto che impostare semplicemente
max-widthcome vincolo, posso utilizzare lo spazio vuoto attorno al mio progetto e trattarlo come uno strumento di layout.
Cerco di decodificare l'idea di Snook in questo video per poi confrontarla alla fine con il mio risultato finale.
- Snook's
- Il mio (ripulito un piccolo post-video per estetica)