Css 删除行中第一列和最后一列的填充

我有一个情况，网格不能有一个外部的左，右填充

如何设置左侧填充：0；对于第行中的第一列并将填充设置为右侧：0。这也应该在屏幕改变时。。。或者做出类似的结果

<div class="row line">
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
</div>

大屏幕生产线

中屏幕生产线

小屏幕生产线

黄色空间应该没有填充，空白有默认的基础填充。

---

您可以通过在.row中嵌套另一个.row来完成此操作。当您这样做时，您会得到如下结果：

.row .row {
width: auto;
margin-left: -0.9375rem; 
margin-right: -0.9375rem;
margin-top: 0;
margin-bottom: 0;
max-width: none;
}

---

实现这一点的一种方法是以第一列和最后一列为目标

.row.line > .columns:first-child {
  padding-left: 0;
}
.row.line > .columns:last-child {
  padding-right: 0;
}

<div class="row line">
  <div class="large-2 medium-3 small-2 columns column-first"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns column-last"></div>
</div>

.column-first {
  padding-left: 0;
}
.column-last {
  padding-right: 0;
}

另一个选项是创建一个类来应用于第一列和最后一列

.row.line > .columns:first-child {
  padding-left: 0;
}
.row.line > .columns:last-child {
  padding-right: 0;
}

<div class="row line">
  <div class="large-2 medium-3 small-2 columns column-first"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns column-last"></div>
</div>

.column-first {
  padding-left: 0;
}
.column-last {
  padding-right: 0;
}

.第一栏{
左侧填充：0；
}
.最后一列{
右边填充：0；
}

但默认情况下，列的两侧都有填充，并且仍会显示填充