grid column and row spacing

here we add some additional spacing to our grid, we can get certain cells to take up 2 parts of the grid using grid-column: 1 / 3;

to get box number 5 to take up 2 cols we can add grid-column: 2 / 4;

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;
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;}
  .c2{background:LightSalmon;}
  .c3{background:PaleTurquoise;}
  .c4{background:LightPink;}
.c5{
background:PaleGreen;
grid-column: 2 / 4;
grid-row: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.

❤👩‍💻🕹