向响应式网格添加固定边距

Question

这是我制作的响应式网格。我想在所有元素周围添加 10px 的边距。我需要这些边距始终保持相同的宽度。但是应用边距破坏了网格的响应方面。我需要 "squeeze" div 而不是 "push" 的边距。

.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

您可以使用 css calc。 Jsfiddle

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

Answer 2

您可以使用 calc 从 width 中删除 margin。这将意味着 margin 将不再使 div 超过容器的 width，这迫使它们换行。

需要进行以下更改：

使用 margin: 10px; 添加新规则 .ideas__gallery div。这会将 margin 添加到 .ideas__gallery

div

修改每个 div 的 width 以使用 calc 从计算的 width

margin

.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>

向响应式网格添加固定边距

Add fixed margins to a responsive grid

html

css