嵌套 Flexbox 网格

我已经构建了一个嵌套的弹性盒网格，将用于各个网关。目前，大概是由于使用outline，每个容器内的内容都会进入（并被隐藏）每个网关周围的空白区域，该空白区域充当每个 div 之间的间距。

有没有更好的方法来处理网格间距，这可以让我确保内容不会超出 div 轮廓？我添加了一个 JSFiddle 来说明该问题（在二级和三级网关中效果最好）。

JSFiddle 在这里：https://jsfiddle.net/graemebryson/6gehj4v7/

HTML

<!-- Product Grid -->
<div class="flex-grid">
  <div class="flex__direction--column">
    <div class="flex__direction--row">
      <!-- Primary Gateway -->
      <div class="item item--primary">
        <div class="item__description">
          <h3>Primary Gateway</h3>
          <p>It is a long established fact that a reader will be distracted by the readable.</p>
        </div>
      </div>
      <div class="item flex__direction--column">
        <!-- Secondary Gateway -->
        <div class="item item--secondary">
          <div class="item__description">
            <h4>Secondary Gateway</h4>
            <p>It is a long established fact that a reader will be distracted by the readable.</p>
          </div>
        </div>
        <div class="item">
          <div class="flex__direction--row">
            <!-- Tertiary Gateway -->
            <div class="item item--tertiary">
              <div class="item__description">
                <h5>Tertiary Gateway</h5>
                <p>It is a long established fact that a reader will be distracted by the readable.</p>
              </div>
            </div>
            <!-- Tertiary Gateway -->
            <div class="item item--tertiary">
              <div class="item__description">
                <h5>Tertiary Gateway</h5>
                <p>It is a long established fact that a reader will be distracted by the readable.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

// Grid
.flex-grid {
  .item {
    flex: 1;
    outline: 5px solid white;
    min-height: 150px;
  }
}

// Set Flex Direction - Column
.flex__direction--column {
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
}

// Set Flex Direction - Row
.flex__direction--row {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
}

在这种情况下，最简单的方法是更新网格规则并使用边框

.flex-grid {
  .item {
    flex: 1;
    min-height: 150px;
  }
  .item--primary, .item--secondary, .item--tertiary {
    border: 2px solid white;
  }
}

或边距 (fiddle)

堆栈片段

.flex-grid .item {
  flex: 1;
  min-height: 150px;
}

.flex-grid .item--primary,
.flex-grid .item--secondary,
.flex-grid .item--tertiary {
  margin: 2px;
  background: lightgray;
}

.flex-grid .item--primary {
  margin-bottom: 0;
}

.flex__direction--column {
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
}

.flex__direction--row {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
}

<!-- Product Grid -->
<div class="flex-grid">
  <div class="flex__direction--column">
    <div class="flex__direction--row">

      <!-- Primary Gateway -->
      <div class="item item--primary">
        <div class="item__description">
          <h3>Primary Gateway</h3>
          <p>It is a long established fact that a reader will be distracted by the readable.</p>
        </div>
      </div>

      <div class="item flex__direction--column">
        <!-- Secondary Gateway -->
        <div class="item item--secondary">
          <div class="item__description">
            <h4>Secondary Gateway</h4>
            <p>It is a long established fact that a reader will be distracted by the readable.</p>
          </div>
        </div>
        <div class="item">
          <div class="flex__direction--row">
            <!-- Tertiary Gateway -->
            <div class="item item--tertiary">
              <div class="item__description">
                <h5>Tertiary Gateway</h5>
                <p>It is a long established fact that a reader will be distracted by the readable.</p>
              </div>
            </div>
            <!-- Tertiary Gateway -->
            <div class="item item--tertiary">
              <div class="item__description">
                <h5>Tertiary Gateway</h5>
                <p>It is a long established fact that a reader will be distracted by the readable.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>