grid布局浏览器兼容_理解css中Grid布局，在项目中如何实现grid页面布局

简介

CSS中Grid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局，但它们遗漏了很多功能，例如垂直居中。后来css3中flexbox的出现解决了很多布局问题，但是它也是一维布局，而不是复杂的二维布局，Grid是为了解决二维布局问题而创建的CSS模块。

使用Gird的好处

1.布局清晰明了，摆脱了模板中使用不同标签下基于浮动，定位的手动计算过程。

2.类似于talbe布局，不同点在于Gird在css中实现，而table在html中实现；同时gird可以根据媒体查询定义不同的上下文，有利于网页响应式设计。

3.摆脱传统布局中文档流的限制，这也意味着可以自由地更改页面元素在html中的位置。

Gird在浏览器的兼容性

从图上可以看出，支持Gird布局的浏览器并不多，IE10以上才支持部分属性，如果想体验Grid布局的强大，推荐使用开通过“体验新功能”的Chrome, Opera 或 Firefox， Chrome:打开浏览器，输入chrome://flags，找到”experimental web platform features”，启用并重启浏览器；Opera：输入opera://flags，与Chrome一样；Firefox:输入layout.css.grid.enabled。

由于Gird兼容性和灵活性不是很高，这就造成了网站上的使用率并不高的原因，当然如果非要使用它又需要向后支持，我们可以利用@supports方法来渐进式增强。

Grid布局的示例源码

1

2

3

4

5

6

7 * {margin: 0;padding: 0;}8 html,body {width: 100%;height: 100%;}9 .container {10 display: grid;11 grid-template-columns: 33.333333% 33.333333% 33.333333%;12 grid-template-rows: auto;13 }14 .item {15 background-color: #444;16 color: #fff;17 font-size: 150%;18 padding: 20px;19 margin: 3.333333%;20 }21 .item-5{22 grid-column-start: 2;23 grid-column-end: 4;24 grid-row-start: 2;25 grid-row-end: 4;26 }27 .item-7{28 grid-column-start: 1;29 grid-column-end: 3;30 grid-row-start: 4;31 grid-row-end: 4;32 }33 .item-12{34 grid-column-start: 1;35 grid-column-end: 4;36 grid-row-start: 6;37 grid-row-end: 6;38 }39

40

41

42

43

44

1

45

2

46

3

47

4

48

5

49

6

50

7

51

8

52

9

53

10

54

11

55

12

56

57

58

效果如下：

源码说明：

一、设置在网格容器上的属性

1. display: grid | inline-grid | subgrid;

属性值：

grid: 生成块级网格

inline-grid: 生成行内网格

subgrid: 如果网格容器本身是网格项(嵌套网格容器)，此属性用来继承其父网格容器的列、行大小。

注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。

2. grid-template-columns: ... | ... ;

grid-template-rows: ... | ... ;

设置行和列的大小，在行轨道或列轨道两边是网格线。

属性值：

track-size: 轨道大小，可以使用css长度，百分比或用分数(用fr单位)。

line-name: 网格线名字，你可以选择任何名字。

3.grid-template-areas

通过获取网格项中的grid-area属性值(名称)，来定义网格模版。重复网格区(grid-area)名称将跨越网格单元格，‘.’代表空网格单元。

属性值：

grid-area-name: 网格项的grid-area属性值(名字)

‘.’ : 空网格单元

none: 不定义网格区域

4. grid-column-gap：; 和 grid-row-gap: ;

网格单元间距。

属性值：

line-size: 网格线间距,设置单位值。

注：间隔仅仅作用在网格单元之间，不作用在容器边缘。

5. grid-gap：;

是grid-column-gap 和 grid-row-gap简写，

注：如果只设置一个值，那么grid-column-gap 和 grid-row-gap都为那个值。

6. justify-items: start | end | center | stretch(默认) ;

垂直于列网格线对齐，适用于网格容器里的所有网格项。

属性值

start: 左对齐。

end: 右对齐。

center: 居中对齐。

stretch: 填满(默认)。

7. align-items: start | end | center | stretch ;

垂直于行网格线对齐，适用于网格容器里的所有网格项。

属性值：

start： 顶部对齐。

end： 底部对齐。

center： 居中对齐。

stretch：填满(默认)。

8. justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。

属性值：

start: 左对齐。

end: 右对齐。

center: 居中对齐。

stretch: 填满网格容器。

space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。

space-between: 两边对齐，网格项之间间隔相等。

space-evenly: 网格项间隔相等。

9. align-content: start | end | center | stretch | space-around | space-between | space-evenly ;

如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。

属性值：

start: 顶部对齐。

end: 底部对齐。

center: 居中对齐。

stretch: 填满网格容器。

space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。

space-between: 两边对齐，网格项之间间隔相等。

space-evenly: 网格项间隔相等。

10. grid-auto-columns: ... ; 和 grid-auto-rows: ... ;

自动生成隐式网格轨道(列和行)，当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。

属性值：

track-size: 网格轨道大小,可以是固定值，百分比或者是分数(fr单位)。

11. grid-auto-flow : row(默认) | column | dense ;

在没有设置网格项的位置时，这个属性控制网格项怎样排列。

属性值：

row: 按照行依次从左到右排列。

column: 按照列依次从上倒下排列。

dense: 按先后顺序排列。

12. grid: none | / | [ [ / ] ];

是一种简写形式，设置网格容器所有属性。

属性值：

none: 设置为所有属性的默认值。

/ : 设置行和列的值，其他属性为默认值。

[ [ / ] ] : 设置网格自动流、网格自动行、网格自动列的值，其他未设置则为默认值。

二、设置在网格项上的属性

1. grid-column-start: | | span | span | auto ;

grid-column-end: | | span | span | auto ;

grid-row-start: | | span | span | auto ;

grid-row-end: | | span | span | auto ;

通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的开始位置，grid-column-end、grid-row-end定义网格项的结束位置。

属性值：

line: 指定带编号或者名字的网格线。

span : 跨越轨道的数量。

span : 跨越轨道直到对应名字的网格线。

auto: 自动展示位置，默认跨度为1。

注：如果未声明grid-column-end或grid-row-end，默认将跨越一个轨道。项目也可以重叠，设置z-index来确定堆叠顺序。

2. grid-column: / | / span ;

grid-row: / | / span ;

是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。

3. grid-area: | / / / ;

定义网格项名字，以便创建模块(容器属性grid-template-areas来定义模块)。

属性值：

name: 项目名子。

/ / / : 可以是数字或网格线名字。

4. justify-self: justify-self: start | end | center | stretch;

定义单个网格项垂直于列网格线的对齐方式。

属性值：

start: 网格区域左对齐。

end: 网格区域右对齐。

center: 网格区域居中。

stretch: 网格区域填满。

提示：也可以在容器上设置justify-items，达到全部网格项对齐。

5. align-self: start | end | center | stretch;

定义单个网格项垂直于行网格线的对齐方式。

属性值：

start: 网格区域顶部对齐。

end: 网格区域底部对齐。

center: 网格区域居中。

stretch: 网格区域填满。