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

Other Items in css
Page Views

This page has been viewed 75 times.

Search Code
Search Code by entering your search text above.
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.

❤👩‍💻🕹