CODEWITHSUNDEEP
htmlcsscss-grid
slashdot
slashdot

Reputation: 786

apply background color to gaps between grid

I am trying to give a background color to the gaps between the boxes / grids. Here is my code:

.box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.box {
  grid-gap: 10px;
  background-color: grey;
}

.box div {
  border: 1px solid #444;
  min-height: 100px;
}
<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
  <div>thirteen</div>
</div>

Can someone suggest what is the right way to do it?

Upvotes: 1

Views: 3696

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Add background 

.box div{       
    border: 1px solid #444;
    min-height: 100px;
    background:#fff;
}

https://jsfiddle.net/lalji1051/1x4n0ody/1/

Upvotes: 2

Related Questions