Positioning with template areas

Template areas is the second method to positioning items with css grid

content

grid-template-ares alow you to create the layout directly in your css, you should write exactly the same number of columns and lines or it doesn't work.
Once your layout is create on your container you have to create a conexion between the element and the grid-template-areas for this we will use grid-area.
With grid-area we will create a key that we will use in our layout to positioning the element.
Let's see an example, for our header we will use the key h, so in our css it should be grid-area: h by this way the key is create. we must do the same with the key of your choice for all the elements.
Finally our css instructions for this layout will be, ". . h h h h h h h h h ." "m c c c c c c c c c c c" ". . f f f f f f f f f ." the . in our code indicate that we want a blank to this place.