Holy Grail-layout med Grid

Holy Grail-layouten er et klassisk webdesignmønster: en side som fyller hele høyden, med topptekst, bunntekst og en midtseksjon med tre kolonner (venstre sidepanel, hovedinnhold og høyre sidepanel). Den var beryktet vanskelig å lage med floats, men CSS Grid gjør den enkel.

Definer oppsettet med navngitte malområder og rader: grid-template-areas beskriver den visuelle strukturen. Tre kolonner og tre rader (toppteksten strekker seg over alle kolonnene, bunnteksten strekker seg over alle kolonnene, og midten har tre kolonner) beskriver hele oppsettet i et lettlest ASCII-diagram.

Hvert underordnet element refererer til området sitt ved navn: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. Grid plasserer dem automatisk.

Midtraden bruker 1fr, som fyller all gjenværende høyde i visningsområdet etter toppteksten og bunnteksten med fast høyde. Dette sikrer at sidepanelene og hovedinnholdet alltid strekker seg og fyller visningsområdet — uten behov for eksplisitte høydeberegninger.

På mobil kan du bruke en media query til å definere grid-template-areas på nytt som en stabel med én kolonne: topptekst, sidepanel, hovedinnhold, aside og bunntekst stablet vertikalt. DOM-rekkefølgen beholdes; bare det visuelle grid-malet endres. Grid-områder gjør det enkelt å lese hvordan oppsettet omstruktureres responsivt.

På nettbrett kan du fjerne høyre sidepanel og utvide hovedinnholdet: definer oppsettet på nytt som "header header" "sidebar main" "footer footer" med grid-template-columns: 240px 1fr. Angi aside { display: none }, eller flytt det under hovedinnholdet i områdeangivelsen.

Legg til mellomrom mellom grid-sporene med gap: var(--spacing-4). Bruk padding inne i hvert område i stedet for på grid-beholderen, slik at avstanden blir konsekvent. Toppteksten og bunnteksten får vanligvis sin egen horisontale padding, tilpasset gridets maksbredde.

Hovedinnholdsområdet kan selv være et grid — for eksempel en artikkel med to kolonner og et sidepanel inne i hovedområdet. Nestede grid-oppsett lager innholdsoppsett innenfor sidens skall uten komplekse klassehierarkier eller dypt nestede posisjoneringer.

Gjør toppteksten sticky: header { position: sticky; top: 0; z-index: 10; }. I et grid-oppsett fungerer sticky-posisjonering på et grid-underordnet element som forventet — toppteksten blir stående mens hovedinnholdet, sidepanelet og aside ruller under den.

Begge sidepanelene kan være sticky: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. De forblir synlige mens hovedinnholdet ruller, slik at du får et oppsett med tre paneler der bare midtpanelet ruller.

Bruk Grid for todimensjonale oppsett av hele siden, som Holy Grail — Grid er spesielt godt egnet til å plassere elementer i navngitte rader og kolonner samtidig. Bruk Flexbox for endimensjonale komponentoppsett (navigasjonselementer på en rad, kortinnhold i en kolonne) inne i grid-områdene.

CSS Grid gjør den historisk vanskelige Holy Grail-layouten enkel: grid-template-areas navngir områdene, 1fr i midtraden fyller høyden i visningsområdet, og media queries definerer områdekartet på nytt for responsiv sammenklapping. Sticky topptekster og sidepaneler kan legges oppå uten ekstra kompleksitet.