如何使外边距是柱状网格中装订线大小的两倍？

Question

如何使外边距是柱状网格中装订线大小的两倍？通常我会在我的.row 元素中添加我在列上使用的相同边距。有没有办法以更合乎逻辑的方式做到这一点？ （因为在一行中添加列边距对我来说似乎很奇怪。 这是我想要的结果：

这是我获得它的方式：

body {
  margin: 0;
}

.container {
  max-width: 1024px;
  margin: 0 auto
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 8px
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5,
.col_6 {
  margin: 0 8px;
  border: 1px solid black;
}

.col_1 {
  width: calc(16.66667% - 16px)
}

.col_2 {
  width: calc(33.33333% - 16px)
}

.col_3 {
  width: calc(50% - 16px)
}

.col_4 {
  width: calc(66.66667% - 16px)
}

.col_5 {
  width: calc(83.33333% - 16px)
}

.col_6 {
  width: calc(100% - 16px)
}

*,
:after,
:before {
  box-sizing: border-box
}

<div class="row">
  <div class="col_3">3</div>
  <div class="col_3">3</div>

  <div class="col_6">6</div>

  <div class="col_3">3</div>
  <div class="col_3">3</div>

  <div class="col_6">6</div>
</div>

Answer 1

使用first-child 和last-child 伪选择器，分别到达第一个孩子和最后一个孩子：

.row > div:first-child {
  margin-left: 50px;
}

.row > div:last-child {
  margin-right: 50px;
}