Css grid part 2

#beginners #css

This tutorial is for css grid.In this tutorial with css grid and the grid-template-areas.First of all let's add our html:

<div class="grid">
<div class="header card">header</div>
<div class="main card">main</div>
<div class="header card">ads</div>
<div class="header card">footer</div>
</div>

Now it is time for css:

body {
margin: 2px;
}
.header {
grid-area: header;
} 
.main {
grid-area: main;
}
.ads {
grid-area: ads;
} 
.footer {
grid-area: footer;
} 
.grid {
display: grid;
grid-template-areas: 
'header header header header' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'main main main ads' 
'footer footer footer footer' ;
width: 100%;
height: 640px;
} 
.card {
background-color: grey;
}

With grid-area in the child classes of grid class we are defining the name of the area that they represent in the layout. grid-template-areas is defining the look of the page.