Three divs side by side with spacing in between

Question

I\'m trying to have three of divs side by side with spacing in between the div\'s in the middle.

Here is the image of what I need:

Here is my current code:<

Answer 1

What about an easy CSS grid solution:

.container {
  display: grid;
  grid-gap: 10px;  /* Simply adjust this value !*/
  grid-template-columns: repeat(3, 1fr); /* OR grid-template-columns: 1fr 1fr 1fr;*/
  grid-auto-rows: 1fr;
  border:1px solid green 
}

.container>div {
  border: 1px solid red;
  height: 20px;
}