Grid Övningar

Övning 1: Enkel 2x2 Grid - display: grid; grid-template-columns: 1fr 1fr; gap: 10px;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

box 4

Övning 2: 3x3 Grid med olika storlekar

Stor Box

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Övning 3: Asymmetrisk Layout

Stor Feature

Box 2

Box 3

Box 4

Box 5

Box 6

Box 7

Övning 4: Grid med Namngivna Områden

Header

Sidebar

Main Content

Footer

Header

Main Content