CSS grid height wrong when using percent as grid gap

Question

I\'m using a CSS grid with images in it and wanted to set a gap between elements that scales with the size of the grid. So I set the grid-gap to 2%, but doing t

Answer 1

the 10% seems to be honoured with flex.

.container {
   width:90%;
   margin:0 auto;
   display:block;
}

.grid {
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
  background-color: #EEE
}

.grid-item {
  flex:0 0 45%;
  max-width:500px;
  margin:0 0 10% 0;
  display: block;
}

img.grid-item:last-of-type {
   margin-bottom:0;
}

 


  
  
  
  
  

Why does this line overlap with the grid?