grid布局浏览器兼容_Grid布局

grid布局是一种新的布局方案。传统布局使用浮动和定位，而grid布局可以像表格一样将页面容器分割成一块一块的区域，定义子元素的排布和位置。可以说是flex布局的升级版。

借用大神旭哥的话：

Grid布局就像是“分田种地”。故事是这样的，张老板是个程序员，省吃俭用攒了点小钱，然后老家因为城镇化建设，农村都没什么人，土地都荒废在那里，于是就承包了一块地，打算养养鱼，种种果树。承包的地方很挺大，如何划分土地就成了问题，于是张老板打算借助Grid布局来划分。

对于身为码农的我们来说，种地就对了！

兼容性

Grid布局是微软在2010年提出来的一种新的布局方式，到2016年的时候提交了该布局的草案。经过近几年发展，兼容性越来越好。

引用自 Can I Use 。兼容火狐52+、谷歌57+等现代浏览器，IE10和11需要添加-ms-来实现兼容。

名词概念

Grid Container、Grid Items(网格容器、网格项)

元素应用 display: grid;即成为网格容器，它是所有网格项的父元素。

很好理解，下面这个例子，class为container的div设置了 display: grid;，container就是网格容器，里面的item都是网格项。

.container{ display: grid; }

Grid Lines(网格线)

所谓的网格都是由横向和竖向的若干线交错产生的，这些线就是网格线。

熟知数学的我们知道，正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

网格线是定义容器的时候产生的，和网格项没有直接的关系，网格项是直接存在于html中的，但是网格线正常看不到它。说白了网格线是虚拟的。

Grid Track(网格轨道)

两个相邻的网格线之间为网格轨道。

网格轨道的特点是能接触到网格容器的边缘。

Grid Cell(网格单元)

两个相邻的列网格线和两个相邻的行网格线之间的空间为网格单元，类似于excel中的单元格。

Grid Areas(网格区域)

四条网格线包围的地方称为网格区域，类似于excel中的合并单元格。

关键字

fr(剩余空间分配数)

fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

gr(网格数)

目前未被w3c采纳，可以作为了解。

属性

介绍完概念，进入正题。

gird布局的属性可以分为两类：容器属性和项目属性。

容器属性分为这几类：

display：布局方式

grid-template：定义网格线的名称和网格轨道的尺寸大小

gap：定义网格项之间的间隙

items：定义网格单元内容的位置

content：定义整个内容区域在容器里面的位置

grid-auto：定义多余网格的大小

grid-auto-flow：定义网格项的放置顺序

项目属性分为这几类：

column / row：指定项目位于哪(些)条网格线

area：指定项目放在哪一个区域

self：指定网格单元内容的位置

下面来看具体的使用

容器属性

1. display

有三种取值：grid | inline-grid | subgrid

gird：生成块级网格

inline-grid： 生成行内网格

subgrid： 网格容器本身就是网格项(嵌套网格容器)，此属性用来继承其父网格容器的行、列大小。(目前所有浏览器都不兼容)

注意，设为网格布局以后，容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。但是position是不会失效的。

2.1 grid-template-columns和grid-template-rows

grid-template-columns用来定义每一列的宽度，grid-template-rows用来定义每一行的高度。

.container{

grid-template-columns: 40px 50px auto 50px 40px;

grid-template-rows: 25% 100px auto;

}