4.5 Avansert CSS – Flexbox og Grid

Slutten på float-triksene

Før flexbox og grid måtte utviklere bruke kreative triks med float, tabeller og absolutt posisjonering for å lage selv enkle layouter. I dag har disse to modulene revolusjonert weblayout. Flexbox er endimensjonal og jobber langs én akse – rad eller kolonne. CSS Grid er todimensjonal og jobber med rader og kolonner samtidig.

La oss starte med flexbox. Du aktiverer det med display: flex på foreldreelementet, som blir en flex-container, mens de direkte barna blir flex-elementer. Flexbox har to akser: hovedaksen (som standard horisontal) og kryssaksen (vertikal). flex-direction styrer hovedaksens retning – row er standard, column gjør det vertikalt. flex-wrap: wrap lar elementene bryte til ny linje når plassen er full, og gap gir avstand mellom elementene.

De to viktigste justeringsegenskapene er justify-content (fordeling langs hovedaksen) og align-items (justering langs kryssaksen). justify-content har verdier som center, space-between og space-evenly, mens align-items har center, flex-start og stretch. Den mest elskede triksen i moderne CSS er å kombinere dem for å sentrere noe perfekt:

.sentrert {
  display: flex;
  justify-content: center;  /* horisontalt */
  align-items: center;      /* vertikalt */
  height: 100vh;
}

Før flexbox var vertikal sentrering en av de mest frustrerende oppgavene i hele CSS.

Kontroll over hvert element

Mens container-egenskapene styrer helheten, styrer tre egenskaper på barna hvordan hvert element oppfører seg. flex-grow sier hvor mye et element skal vokse relativt til de andre når det er ledig plass. flex-shrink sier hvor mye det krymper når plassen er trang (0 betyr aldri). Og flex-basis setter startstørrelsen før vekst eller krymping.

Disse kan slås sammen i kortformen flex. flex: 1 betyr at elementet vokser og deler ledig plass likt med andre flex: 1-elementer. flex: 0 0 250px betyr «ikke voks, ikke krymp, vær 250px bred». Et godt eksempel er en sidebar-layout: gi sidebaren flex: 0 0 250px for fast bredde og hovedinnholdet flex: 1 for å fylle resten.

Forholdene mellom flex-verdiene fordeler plassen. Har du tre elementer med flex: 1, flex: 2 og flex: 1, blir summen 4 andeler – så de får henholdsvis 25 %, 50 % og 25 % av den ledige plassen. Dette gjør det enkelt å lage proporsjonale kolonner uten å regne ut piksler.

Grid: rutenettet i to dimensjoner

CSS Grid aktiveres med display: grid, og du definerer strukturen med grid-template-columns og grid-template-rows. Den viktige fr-enheten (fraction) er en andel av ledig plass: grid-template-columns: 1fr 2fr 1fr gir tre kolonner der den midterste blir dobbelt så bred som de to andre. Kortformen repeat(3, 1fr) lager tre like kolonner.

Du kan plassere elementer manuelt. grid-column: 1 / 3 lar et element spenne over kolonne 1 til 3, og grid-column: 1 / -1 strekker det over alle kolonner. Alternativt bruker du span, som i grid-column: span 2. En spesielt lesbar teknikk er grid-template-areas, der du «tegner» layouten i CSS med navngitte områder, og kobler elementene til dem med grid-area.

Den kanskje mest nyttige grid-teknikken er responsivt rutenett uten media queries: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). Her er minmax(280px, 1fr) at hver kolonne er minst 280px, men kan vokse, og auto-fit lar nettleseren regne ut hvor mange kolonner som får plass – flere på brede skjermer, færre på smale. Forskjellen på auto-fit og auto-fill er subtil: auto-fit kollapser tomme spor og lar elementene strekke seg, mens auto-fill beholder de tomme sporene. I de fleste tilfeller er auto-fit det du vil ha.

Når skal du bruke hva? Bruk flexbox for komponenter og endimensjonal fordeling – menyer, verktøylinjer, sentrering. Bruk grid for todimensjonale sideoppsett – header, sidebar og footer, gallerier og dashbord. I praksis bruker du gjerne grid for den overordnede sidelayouten og flexbox for innholdet inni hver celle. Og gap er enklere enn margin for avstander i begge.

Oppsummering

Flexbox og grid har gjort float-triksene overflødige. Flexbox er endimensjonal og perfekt for å fordele og sentrere elementer i en rad eller kolonne – med flex-direction, justify-content, align-items, gap og kortformen flex (der forholdstall som 1:2:1 deler plassen i 25/50/25 %).

CSS Grid er todimensjonal og ideelt for hele sideoppsett, med grid-template-columns, fr-enheten, grid-template-areas og den responsive repeat(auto-fit, minmax(...))-teknikken som gir rutenett uten media queries. Tommelregelen: flexbox for komponenter, grid for sideoppsett – og gjerne begge sammen. Med disse to kan du bygge nesten hvilken som helst layout.