using a css grid area template
here we can specify areas for the grid. using grid-template-areas.
once the areas are defined we can add the items into each area with grid-area: header in each element
Use grid-area Without Creating an Areas Template
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
Here is a quick reference to how the line numbers work in css grid.
HTML
<div class='grid-wrap'>
<div class='c1'>1</div>
<div class='c2'>2</div>
<div class='c3'>3</div>
<div class='c4'>4</div>
<div class='c5'>5</div>
</div>CSS
.grid-wrap {
display:grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows:50px 50px 50px;
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
font-size:22px;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-gap:10px 10px; /* this is shorthand for the grid-column-gap and grid-row-gap */
}
c1,c2,c3,c4,c5 {}
.c1{background:LightSkyBlue; grid-area: header }
.c2{background:LightSalmon; grid-area: advert}
.c3{background:PaleTurquoise; grid-area: footer}
.c4{background:LightPink; grid-area: content}
.c5{
background:PaleGreen;
grid-area: 1/1/2/4;
}Demo
1
2
3
4
5