[Grid Layout] Describe a grid layout using grid-template-areas

We can describe the nature of a grid in an ‘ASCII-art’ way with grid-template-areas. Let’s see how to specify the nature of our grid so that it’s instantly recognisable to anyone else what our layout is going to look like.

 

We can mix 'fr' with other units:

grid-template-rows: 60px 10fr 2fr;

 

We can use '.' as empty placeholder:

            grid-template-areas:
                    ". header"
                    "aside section"
                    "aside footer";

 

 

 Try to resize me: