CSS Grid

We used flexbox to lay out our elements in a single dimension, but using purely flex for the entire page layouts can get messy and perform badly. grid makes it easier to create whole page layouts by dividing a container into a grid where we can place and position elements in two dimensions: row and column.

Grid does not replace flexbox; one dimensional components should still use flex. It is usually a good idea to write the page layout using grid and the layout of sections within the page using flex.

All we need to get a container to start using a grid layout is to set display: grid; on it. All child elements will then become grid items.