grid 删格布局

发表于 | 分类于 | 阅读次数:

传送门 - http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 来自阮一峰的博客，这篇文章作为一个自己学习笔记吧。

顾名思义就是利用网格结构来布局。
正常的盒模型布局，布局结构会相对复杂。且自响应能力较差。于是就出现了flex。和之前相似的就是还是属于一维布局，正常流式布局。而grid就属于网格二维布局，相比之前能够更简单的实现一些布局工作。

一、基本概念

容器和项目

这个和flex类似，grid作用区域叫做容器，容器顶级子元素叫做项目

行（row）和列 （column）

例：m个row 和 n个col

单元格

由行和列组成的格子 m*n个

网格线

围成单元格的线 m+1 和 n+1个

二、容器属性

行列的大小，边距，对齐方式

1. display

两种，定义grid布局生效，生效类型的容器属于block还是inline

1
2
display: grid;
display: inline-grid;

2. grid-template-columns 和 grid-template-rows

定义每行，每列的大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
  display: grid;
  // 正常col和row两种，3x3格子的大小
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;

  // repeat 两个参数，（重复次数，重复的模式）
  grid-template-columns: repeat(3, 100px);
  grid-template-columns: repeat(2, 100px，50px); // 100px 50px 100px 50px
  grid-template-columns: repeat(auto-fill, 100px); // 自动填满一行

  // fr fraction缩写，比例片段。
  grid-template-columns: 150px 1fr 2fr; // 150px剩下的区域按1:2分配

  // minmax 不小于100px不大于1fr
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);

  // 网格线命名
  grid-template-columns: [c1, header] 100px [c2] 100px [c3] auto [c4];
}

3. grid-gap

定义边距

1
2
3
grid-row-gap: 20px;
grid-column-gap: 20px;
grid-gap: <grid-row-gap> <grid-column-gap>; // 先行后列

4. grid-template-areas

定义区域命名

1
2
3
grid-template-areas: "header header header"
                    "main main sidebar"
                    "footer footer footer";

5. grid-auto-flow

定义排列顺序和自动密集排序row dense

1
2
grid-auto-flow: column | row; // 默认row
grid-auto-flow: row dense

6. justify-items, align-items, space-items

定义容器中项目内容的对齐方式，和flex类似

1
2
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

7. justify-content, align-content, space-content

定义容器中项目的对齐方式，和flex类似

1
2
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

8. grid-auto-rows, grid-auto-columns

超出定义网格区域的单元格大小（默认和template一样）

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}

9. grid-template 和 grid

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

三、项目属性

定位和对齐方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.item-1 {
  // 默认序号
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;

  // 网格线
  grid-column-start: header-start;
  grid-column-end: header-end;

  // span 跨行
  grid-column-start: span 2; // 或者grid-column-end: span 2;

  // 简写
  grid-column:  start / end;
  grid-row:  start / end;

  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

  grid-area: header;
}
1
2
3
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;

四、兼容性

之所以这么强大的grid布局没有普及和其兼容性有很大的关系。现在的主流的几家浏览器其实都支持了，但是在ie、qq浏览器、百度浏览器和opera mini都还不支持或者不太支持（2019/10/21）
Can I Use