Holy Grail -asettelu Gridillä

Holy Grail -asettelu on klassinen verkkosuunnittelumalli: koko näkymän korkuinen sivu, jossa on otsake, alatunniste ja kolmipalstainen keskiosa (vasen sivupalkki, pääsisältö ja oikea sivupalkki). Aiemmin sen toteuttaminen kelluvilla elementeillä oli tunnetusti hankalaa, mutta CSS Grid tekee siitä helppoa.

Määritelkää asettelu nimeämällä mallialueet ja rivit: grid-template-areas kuvaa visuaalisen rakenteen. Kolme saraketta ja kolme riviä (otsake ulottuu kaikille sarakkeille, alatunniste ulottuu kaikille sarakkeille ja keskellä on kolme saraketta) kuvaavat koko asettelun helposti luettavana ASCII-kaaviona.

Kukin lapsielementti viittaa alueeseensa nimellä: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Grid sijoittaa ne automaattisesti.

Keskirivillä käytetään arvoa 1fr, joka täyttää kiinteäkorkuisen otsakkeen ja alatunnisteen jälkeen jäljelle jäävän näkymän korkeuden. Näin sivupalkit ja pääsisältö ulottuvat aina täyttämään näkymän — korkeutta ei tarvitse laskea erikseen.

Mobiilissa määrittäkää media queryllä grid-template-areas uudelleen yksisarakkeiseksi pinoksi: otsake, sivupalkki, pääsisältö, sivupaneeli ja alatunniste pystysuoraan pinottuina. DOM-järjestys säilyy, ja vain visuaalinen grid-malli muuttuu. Grid-alueet tekevät responsiivisen rakenteen muuttamisesta helposti luettavaa.

Tabletilla oikean sivupaneelin voi poistaa ja pääsisältöä laajentaa määrittelemällä mallin uudelleen: "header header" "sidebar main" "footer footer" ja käyttämällä grid-template-columns: 240px 1fr -määrittelyä. Asettakaa aside { display: none } tai siirtäkää se pääsisällön alapuolelle alueiden määrittelyssä.

Lisätkää grid-kiskojen väli käyttämällä määritettä gap: var(--spacing-4). Lisätkää sisämarginaali kuhunkin alueeseen grid-säilön sijaan, jotta välit pysyvät yhdenmukaisina. Otsakkeelle ja alatunnisteelle annetaan yleensä oma vaakasuuntainen sisämarginaali, joka vastaa gridin enimmäisleveyden tasausta.

Pääsisältöalue voi itse olla grid — pääalueen sisälle voidaan sijoittaa esimerkiksi kaksipalstainen artikkeli ja sivupalkki. Sisäkkäiset gridit mahdollistavat sisältöasettelun sivun runkoasettelun sisällä ilman monimutkaisia luokkahierarkioita tai syvälle sisäkkäisiä sijainteja.

Tehkää otsakkeesta kiinnittyvä: header { position: sticky; top: 0; z-index: 10; }. Grid-asettelussa kiinnittyvä asemointi toimii gridin lapsielementillä odotetusti — otsake pysyy paikallaan, kun pääsisältö, sivupalkki ja sivupaneeli vierivät sen alla.

Molemmat sivupalkit voidaan kiinnittää: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Ne pysyvät näkyvissä pääsisällön vieriessä, jolloin syntyy kolmipaneelinen asettelu, jossa vain keskiosa vierii.

Käyttäkää Gridiä kaksiulotteisiin sivurungon asetteluihin, kuten Holy Grail -asetteluun — Grid soveltuu erinomaisesti kohteiden sijoittamiseen nimettyihin riveihin ja sarakkeisiin samanaikaisesti. Käyttäkää Flexboxia yksiulotteisiin komponenttiasetteluihin (esimerkiksi navigointikohteisiin rivissä tai kortin sisältöön sarakkeessa) grid-alueiden sisällä.

CSS Grid tekee historiallisesti hankalasta Holy Grail -asettelusta helpon: grid-template-areas nimeää alueet, keskirivin 1fr täyttää näkymän korkeuden, ja media queryt määrittelevät aluekartan uudelleen responsiivista pinoamista varten. Kiinnittyvät otsakkeet ja sivupalkit voidaan lisätä ilman ylimääräistä monimutkaisuutta.