# grid布局

这是一个非常强大的功能，flex布局可能很多行代码，用grid的话最少代码减半。但是更要去了解的是grid的思路和思想与以前的table布局类似，grid更像是flex+table的方式

# display: inline-grid vs display: grid

跟块级元素和内联元素类似

# grid-template-columns 和 grid-template-rows

以grid-template-columns举例，有下面N种写法

grid-template-columns: 100px 100px 100px;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
grid-template-columns: 100px auto 100px;

其中既有固定宽度的、也有百分比、等比分配fr，自动计算等等。可谓是非常灵活多变，常见的三列等分，可以用下面的布局方式，其中column-gap还可以支持按照间距分配。

# 多等分布局

/* 三等分,且间距为20px */
.box{
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}

1
2
3
4
5

其中repeat的3可以换成n，就是多等分布局了

# 圣杯布局

类似左右边栏为200px,中间部分满屏，间距为10px，代码如下

.box{
  grid-template-columns: 200px auto 200px;
  column-gap: 10px;
}

1
2
3
4

# 实战

一个表格的例子，这里需求是三分表格，之后最后一列文字右对齐。还有row对应的border-bottom。本来想用flex或者是table，转念一想还是上grid,毕竟多用才能熟，遇到了不少问题。

# 三等分并不能完全满足我的需求

grid-template-columns: 1fr 1fr 1fr;

中间得分一列太靠左，所以这里改成了，尽量接近设计稿的3等分

grid-template-columns: 50% 1fr 1fr;

# grid布局里row border的问题

其次是这里的border-bottom，因为grid布局就没有对这里的行border做约束，翻了下stackoverflow (opens new window)，一个是用背景渐变repeating-linear-gradient+row-gap。还有一个方法是用伪类在每行最后一个元素后面加一个大横条。

感觉都属于hack的手段，果断子元素border-bottom走起，不过发现

&:nth-child(3n+3) {
  justify-self: right;
}

1
2
3

这里右对齐的效果会打断

所以修改了属性

&:nth-child(3n+3) {
  text-align: right;
}

1
2
3

# grid布局row height的问题

如果设置

grid-template-rows: 52px;

只会对第一个元素生效，所以这里对子元素设置height+line-height实现文字垂直居中对齐和撑大容器高度使其满足间距

# 兼容性

IE10+基本PC主流浏览器都支持
微信生态基本支持（包括移动端页面和小程序），偏门的属性等有待支持，具体的可以再去查

# 参考

阮一峰-CSS Grid 网格布局教程 (opens new window)