# 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;
1

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

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

# 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;
1

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

# 兼容性

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

# 参考

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

上次更新: 2/28/2021, 1:44:20 PM