CSS Grid Example from Grid by Design

Using negative space

This example uses line-based positioning, to position the header and footer, stretching them across the grid.

By making the content span a number of rows, we can then space the blocks out next to that content. Each in their own row.

Block A
Block B
Block C