Grid布局

Posted on | In

Grid布局

为什么是Grid？

  1. 现在grid已经成为css的规范，这是未来的布局方式
  2. 在html中不会再有row（我们从一维布局走到了二维世界）
  3. 建议： flexbox 用在UI元素层面，Grid布局应用在页面布局上

兼容性

IE11以下， Edge15以下， IEmobile10以下 部分支持。

https://caniuse.com/#search=grid

兼容性解决方案：

1. 使用polyfill
2. 使用@supports (but前提是你的浏览器支持@supports)

语法：

  1. 定义grid容器
1
2
3
4
.box {
    display: grid;
  	grid-gap: 20px; /* grid网格之间的间隙 */
}

  1. 给cell布局

    感觉啊， css的发展越来越语义化， 这个cell占的位置都可以直接读出来了。太强大了。

    grid-column: 1/2; /* 我希望这个元素占这个容器的宽度是从第一列到第二列的宽度 = = 还有是这个关系[1, 2) */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.col-1 {
  grid-column: 1/2;
}

.col-2 {
  grid-column: 2/3;
}
.col-3 {
  grid-column: 3/4;
}

.col-4 {
  grid-column: 4/5;
}