Add fixed margins to a responsive grid

Question

Here's a responsive grid I've made. I want to add 10px margin around all elements. And I need these margins to be the same width all the time. But applying margins broke the responsive aspect of the grid. I need margins to "squeeze" the div not to "push" it.

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}

.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}

.one {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightblue;
  float: left;
}

.two {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightpink;
  float: left;
}

.three {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightyellow;
  float: left;
}

.four {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightcyan;
  float: left;
}

.five {
  width: 66.6666666666666666%;
  height: 310px;
  background: lightgreen;
  float: left;
}

.six {
  width: 66.6666666666666666%;
  height: 310px;
  background: lightskyblue;
  float: left;
}

.seven {
  width: 33.3333333333333333%;
  height: 310px;
  background: lightgoldenrodyellow;
  float: left;
}

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3">Headline</h3>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
  </div>
</div>

Answer 1

You can use calc to remove the margin from the width. This will mean the margin will no longer make the divs exceed the width of the container which is forcing them onto a new line.

The following changes are required:

• Add a new rule .ideas__gallery div with margin: 10px;. This will add the margin to all the child divs of .ideas__gallery
• Modify the width of each of the divs to use calc to remove the margin from the calculated width

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}

.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}

.ideas__gallery div {
  margin: 10px;
}

.one {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightblue;
  float: left;
}

.two {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightpink;
  float: left;
}

.three {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightyellow;
  float: left;
}

.four {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightcyan;
  float: left;
}

.five {
  width: calc(66.6666666666666666% - 20px);
  height: 310px;
  background: lightgreen;
  float: left;
}

.six {
  width: calc(66.6666666666666666% - 20px);
  height: 310px;
  background: lightskyblue;
  float: left;
}

.seven {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: lightgoldenrodyellow;
  float: left;
}

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3">Headline</h3>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
  </div>
</div>

Answer 2

You ca use css calc. Jsfiddle

.one, .two, .three
{
    margin: 10px;
    width:calc(33.3333333333333333% - 20px);
}