CSS Grid Layout – en ny måte å designe nettsider på

CSS Grid Layout er en ny layoutmodul i CSS. Dette er den første CSS-modulen som er spesifikt laget for å bygge sidelayout. Med CSS Grid kan vi posisjonere elementer i 2 dimensjoner, kolonner og rader (i motsetning til Flexbox hvor du må velge kolonner eller rader).

Et lite eksempel på CSS Grid Layout

Dislay: grid

Nedenfor lager vi 3 kolonner (hvorav hvert element opptar 2 deler (2fr) av plassen (fraction of the free space), 1 del og 1 del. Vi deler så i 2 rader, den ene er 100px høy, den andre 200px høy.

Resultat – 3 kolonner, 2 rader

CSS Grid Layout

Del: