Gå til innhold

This is grid.

This is a simple grid, divided into three columns – each column being 1fr in width.

This means the available horizontal space is split evenly, with each column taking up one-third of the space, no matter the container’s size.

As you can see, this column keeps the grid width. The gray gaps above and to the right are created by setting Column gap and Row gap on the parent row.

This column breaks the normal grid behaviour of always being ⅓ in width. By setting Grid column start to span 2 we tell the browser that the column should stretch across two columns making it occupy the second and third column.