Snook a publicat un articol intitulat „Overlapping Header with CSS Grid”, în care se uită la un model de design al antetului, care simt că transcende tendințele și care a fost popular pentru totdeauna. Ideea este că antetul este supradimensionat, iar zona principală de conținut se strecoară în el și se suprapune pe fundalul antetului. Există doar ceva cam drăguț și reconfortant.
Mintea mea se îndreaptă spre același loc pe care îl face Snook's:
Din punct de vedere istoric, am făcut acest lucru cu marje negative. Antetul are o înălțime care adaugă o grămadă de căptușeală în partea de jos și apoi corpul primește o
margin-top: -50pxsau orice cere designul.
Dar apoi decide să o facă cu grila CSS! Interesant. De ce? Ei bine, în asta vom intra. Grila se poate simți (și poate fi de fapt) mai robustă. Grila poate fi, de asemenea, mai flexibilă. De exemplu, max-heightși automarginile sunt excelente la centrare, dar ce se întâmplă dacă doriți jgheaburi inegale pe margini? Ar fi greu acolo și ușor cu Grid. Ethan Marcotte a scris:
Mai degrabă decât pur și simplu implicit
max-widthca o constrângere, pot folosi spațiul gol din jurul designului meu și îl pot trata ca un instrument de aspect.
Încerc să inversez ideea inginerului Snook din acest videoclip și apoi să o compar cu rezultatul meu final.
- Snook's
- Mine (a curățat un post-video mic pentru estetică)