列从父行中吹出

Question

我在网站上使用自定义响应式网格作为独立学习的一种方式，了解它们到底如何工作并减少膨胀。

我的自定义网格突然开始爆炸，我不明白为什么。

非常标准的响应式网格。工作方式如下：容器 > 行 > 列。

我想要什么： 横跨 4 列。我整理了一个快速的 illo 来展示我想要实现的目标。

发生了什么： 演示：https://stg-nightshiftstudio-staging.kinsta.cloud/sample-page-do-not-delete/ （他们正在包装）

HTML

 <div class="grid__container">
      <div class="grid__row grid__margin-x">
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
      </div>
    </div>

CSS

// PARENT
.grid__container{
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 96%;
  width: 100%;
}
.grid__row{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  height: 100%;
}

// WHEN THERE IS MARGIN REMOVE IT FROM EDGES OF OUTER ROW TO AFFORD SPACE
.grid__row.grid__margin-x {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;

// 4 COLUMNS - GUTTER SO THEY ALL FIT
.grid__row.grid__margin-x > .grid__cell.grid__cell__medium--4{
   width: calc(33.33333% - 1.875rem);
}

// GUTTER ADDED TO COLUMN
.grid__row.grid__margin-x > .grid__cell {
   margin-left: 0.9375rem;
   margin-right: 0.9375rem;
}

• 向每个单元格添加边距以提供装订线 (0.9375rem)
• 外行的边距被减去，以便为装订线提供空间（1.875rem）
• 基于许多响应式框架，我期望这允许所有 4 列连续出现。

发生什么事了？

Answer 1

如果我理解正确的话，你希望网格显示 4 列彼此相邻。只需将 33% 更改为 25% 即可完成。

.grid__row.grid__margin-x > .grid__cell.grid__cell__medium--4{
   width: calc(25% - 1.875rem);
}