Snook „Átfedő fejléc és CSS rács” címmel publikált egy cikket, ahol egy fejléc tervezési mintát vizsgál, amely úgy érzem, meghaladja a trendeket és örökké népszerű. Az ötlet az, hogy a fejléc túlméretezett, és a fő tartalmi terület belopakodik, és átfedi a fejléc hátterét. Csak van benne valami kedves és vigasztaló.
Az én gondolatom ugyanoda megy, ahol Snook:
Történelmileg negatív margókkal tettem ezt. A fejlécnek van egy magassága, amely egy csomó párnázatot ad az aljára, majd a test kap egy
margin-top: -50pxvagy bármit, amit a kialakítás megkövetel.
De aztán úgy dönt, hogy inkább CSS griddel teszi! Érdekes. Miért? Nos, ebbe fogunk belemenni. Rács egyszerűen erősebbnek érezheti magát (és valójában is lehet). A rács rugalmasabb is lehet. Például max-heightés automargók nagy a központosítás, de mi van, ha azt szeretnénk, egyenetlen ereszcsatornák szélein? Ez ott nehéz lenne, és Griddel könnyű. Ethan Marcotte ezt írta:
Ahelyett, hogy egyszerűen nem teljesíteném
max-widthkényszerként, használhatom a tervem körüli üres helyet, és elrendezési eszközként kezelhetem.
Megpróbálom megfordítani Snook ötletét ebben a videóban, majd végül összehasonlítom a végeredményemmel.
- Snook's
- Az enyém (megtisztítottam egy utóvideót az esztétika érdekében)