升级了奇趣框架栅格换行自动间距的实现

今天的工作任务，本来是要整聊天室项目的，但是后端那边部署有点问题，还是很忙，于是就跑去整了另外一个 Boss 交代的任务。

主要是给 WP 项目增加两个页面，切图嘛，设计给的素材到手，问题就不是很大了，所以也没什么好记录的。就是期间我升级了下奇趣框架，将栅格系统的自动换行间距从负 margin 的形式换成了 row-gap，因此不再支持 IE 系列浏览器了。

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

.row{
  display: flex;
  margin-left: -1em;
  margin-right: -1em;
  margin-bottom: -1em;
}

.column{
  flex: 0 0 100%;
  width: 100%;
  padding: 0 1em;
  margin-bottom: 1em;
}

大概就是这样，每个格子都自带下间距，而父容器 .row 设置负间距将会抵消掉子元素格子 .column 那部分间距，也就实现了栅格单行总数超过 12 导致换行之后，自动设置行与行之间的间距了。缺点就是如果你把它放在页面最底下的位置，写了负间距的 .row 父容器会不管用，导致部分元素溢出页面，除非 .row 父容器的父容器至少提供了 1em 的内间距。

换成了 row-gap 的话，也就是 margin-bottom 都可以去掉了，左右的间距还是得有，如果用 column-gap 尝试去替换，会导致 .column 格子的宽度计算错误，导致换行。这是因为间距并不计算在格子的 width 里面，是独立存在的。更简单的办法就是直接不用 Flex，用 Grid 进行布局。

2021-11-04