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
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹