css 实现 flex 布局下，带间隔 between 最后一行自动对齐表格

目标效果：

<div class="commentBrands">
  <img src="" alt="" />
</div>

.commentBrands {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 -0.08rem;
  &:after {
    content: "";
    flex: auto;
  }
  > img {
    width: calc(100% / 6);
    padding: 0 0.08rem;
  }
}

Grid布局

简单几行代替上面代码

.commentBrands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 0.08rem;
}

Grid 容器属性

display: grid; / display: inline-grid;

grid: grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写

显式网格属性

grid-template 是下面grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid-template-columns 定义每一列的列宽
grid-template-rows 定义每一行的行高
grid-template-areas 网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成非矩形的网格区块是无效的，MDN,网格区块(grid areas)和网格项(grid item)沒有关联，但是它们可以和一些网格定位属性(grid-placement properties)关联起来
```
grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
```
或者多个单元格合并成一个区域
```
grid-template-areas: 'header header header'
                   'main main sidebar'
                   'footer footer footer';
```
如果某些区域不需要利用，则使用”点”（.）表示。
```
grid-template-areas: 'a . c'
                   'd . f'
                   'g . i';
```
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

grid-template-columns 和 grid-template-rows 的取值：
固定值/百分比：grid-template-columns: 100px 100px 100px; grid-template-columns: 100px 30% 100px;
repeat
如grid-template-columns: 100px 100px 100px; 等效于repeat(3, 100px);
grid-template-columns: 100px 20px 100px 20px 等效于repeat(2, 100px 20px)
auto-fill 自动填充
grid-template-columns: repeat(auto-fill, 100px) 表示每列宽度100px，然后自动填充，直到容器不能放置更多的列
fr 片段fraction，相对百分比
grid-template-columns: 1fr 150px 1fr 2fr; 表示第一列等宽第三列，第四列是第一列的2倍，第二列固定150px
minmax 产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr); 表示第三列列宽不小于100px，不大于1fr
auto 表示由浏览器自己决定长度
grid-template-columns: 100px auto 100px; 第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度
网格线的名称
属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; 3行的grid中，有4根[r1-4]水平网格线
允许同一根线有多个名字，比如[fifth-line row-5]
的
隐式网格属性
grid-auto-columns 用来设置，浏览器自动创建的多余网格(即不在grid-template-columns属性中定义的)的列宽
grid-auto-rows 用来设置，浏览器自动创建的多余网格(即不在grid-template-rows属性中定义的)的行高
grid-auto-flow: row / column / row dense / column dense划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”row，即把子元素依次先填满第一行，再开始放入第二行；加dense表示当一行(列)中有剩余空白区域时，从下一行(列)补上
间距属性
[grid-]gap 下面两个的合并简写形式 gap: <grid-row-gap> <grid-column-gap>; 省略了第二个值，浏览器认为第二个值等于第一个值
[grid-]row-gap 设置行与行的间隔（行间距）row-gap: 20px;
[grid-]column-gap 设置列与列的间隔（列间距）grid-column-gap: 20px;
对齐属性
容器对齐
justify-content 整个内容区域在容器里面的水平位置（左中右）justify-content: start | end | center | stretch | space-around | space-between | space-evenly
align-content 整个内容区域的垂直位置（上中下）align-content: start | end | center | stretch | space-around | space-between | space-evenly
place-content 上面两个的缩写 place-content: <align-content> <justify-content>
单元格对齐
justify-items 设置单元格内容的水平位置（左中右）justify-items: start | end | center | stretch;
align-items 设置单元格内容的垂直位置（上中下）align-items: start | end | center | stretch;
place-items 上面两个的合并简写形式 place-items: <align-items> <justify-items>; 如果省略第二个值，则浏览器认为与第一个值相等

Grid 项目属性

定位属性

grid-column-start 指定项目其左边框定位在容器的哪个垂直网格线[c1-n]
grid-column-end 指定项目其右边框定位在容器的哪个垂直网格线[c1-n]
grid-column 是grid-column-start和grid-column-end的合并简写形式 grid-column: <start-line> / <end-line>; 斜杠以及后面的部分可以省略，默认跨越一个网格
grid-row-start 指定项目上边框定位在容器的哪个水平网格线[r1-n]
grid-row-end 指定项目下边框定位在容器的哪个水平网格线[r1-n]
grid-row 是grid-row-start属性和grid-row-end的合并简写形式; grid-row: <start-line> / <end-line>; 如grid-row: 1 / 2; grid-row: 1 / span 2; 斜杠以及后面的部分可以省略，默认跨越一个网格
grid-area
- 指定项目放在（grid-template-areas定义的）哪一个区域；
- 还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。grid-area: <row-start> / <column-start> / <row-end> / <column-end>
  其值可以是
1-n的数字；
或者grid-template-areas中定义的区域名-start/end
span 关键字，表示”跨越”，即左右边框（上下边框）之间跨越多少个网格，如grid-column-start: span 2; 等同于grid-column-end: span 2;表示其右边界相当于原始左边界往右跨占2格

对齐属性

justify-self 设置单元格内容的水平位置（左中右）,同justify-items
align-self 设置单元格内容的垂直位置（上中下）,同align-items
place-self 是align-self属性和justify-self属性的合并简写形式. place-self: <align-self> <justify-self>;