CSS3 - CSS Grid - Building a responsive grid layout with grid-template-areas
What we’ll be building
In this article, I will describe how to implement an easy responsive page layout with CSS grid.
It should look like this when page width is low:
And like this with a high page width:
For this example we’ll be using the
grid-template-areas property to layout the grid.
Defining a CSS grid is done by assiging the
display:inline-grid property to the container element.
Each of the child elements that are to be layouted then gets a grid-identifier that we’ll use to place them. This is done using the
grid-area CSS property.
So, this is the html for our grid:
Note that these elements are not it the order that can be seen in the layout screenshots above. This is because element order can be set, when defining the grid (just like with flexbox order)
On the css side we give each of the children a unique identifier through
The layout can then be done via the
This sets a five row, one column layout and leads to this:
For the high width version we define a media query like so:
This defines a four row, two column layout. Note how section-two spans one column and two rows, and footer and header each span two columns and one row.