grid布局浏览器兼容_Grid布局指南

CSS网格布局(又称“网格”)，是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table(表格)布局，然后用float(浮动)，position(定位)和inline-block(行内块)布局，但是这些方法本质上是hack，遗漏了很多功能，例如垂直居中。后来出了flexbox(盒子布局)，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们(flexbox与grid)能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块,2012年11月06日成立草案。

初步了解和浏览器支持

使用Grid布局非常简单，你只需要给容器(container)定义：display:grid，并设置列(grid-template-columns)和 行(grid-template-rows)的大小，然后用grid-column和grid-row定义容器子元素(grid-item项目)的位置。与flexbox布局类似，一开始项目的排列顺序并不重要，可以放置在容器的任何位置，这也使得你非常容易通过媒体查询重新排列你的项目。想象一下，当你定义整个页面的布局时，你只需要几行CSS就可以完成页面重排以便适应各种屏幕宽度，这得有多么神奇！

好东西总是来的晚，不要焦躁，不要沮丧。活好每一天，自然就等到了。

目前浏览器还不支持Grid布局，IE10和IE11支持老的语法。如果你想体验Grid布局的强大，推荐使用开通过“体验新功能”的Chrome, Opera 或 Firefox， Chrome:打开浏览器，输入chrome://flags，找到"experimental web platform features"，启用并重启浏览器；Opera：输入opera://flags，与Chrome一样；Firefox:输入layout.css.grid.enabled。

浏览器支持情况：

Chrome|Safari|Firefox|Opera|IE|Android/iOS

-|-|--|-|-

29+ (Behind flag)|Not supported|40+ (Behind flag)|28+ (Behind flag)|10+ (Old syntax)|Not supported

重要术语

在深入了解Grid布局概念之前，我们先了解一些术语。因为这些术语在概念上很相似，如果你不记住Grid定义的含义，会很容易将它们混淆，但是不用担心，这里术语很少。

1.网格容器(Grid Container)

元素应用display:grid，它是其所有网格项的父元素。下面例子container就是网格容器。

2.网格项(Grid Item)

网格容器的子元素，下面的item元素是网格项，但sub-item不是。

3.网格线(Grid Line)

组成网格线的分界线。它们可以是列网格线(column grid lines)，也可以是行网格线(row grid lines)并且居于行或列的任意一侧，下面黄色线就是列网格线。

grid lines

4.网格轨道(Grid Track)

两个相邻的网格线之间为网格轨道。你可以认为它们是网格的列或行，下面在第二个和第三个网格线之间的黄色部分为网格轨道。

Grid Track

5.网格单元(Grid Cell)

两个相邻的列网格线和两个相邻的行网格线组成的是网格单元，它是最小的网格单元。下面行网格线1(row grid lines 1)、行网格线2(row grid lines 2)和列网格线2(column grid lines 2)、列网格线3(column grid lines 3)组成的黄色区域为网格单元。

Grid Cell

6.网格区(Grid Area)

网格区是由任意数量网格单元组成，下面行网格线1(row grid lines 1)、行网格线3(row grid lines 3)和列网格线1(column grid lines 1)、列网格线3(column grid lines3)组成的黄色区域为网格区。

Grid Area

设置在网格容器上的属性

display

grid-template-columns

grid-template-rows

grid-template-areas

grid-column-gap

grid-row-gap

grid-gap

justify-items

align-items

justify-content

align-content

grid-auto-columns

grid-auto-rows

grid-auto-flow

grid

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: 网格线名字，你可以选择任何名字。

例子：

当你设置行或列大小为auto时，网格会自动分配空间和网格线名称。

.container{

display:grid;

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

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

}

grid-numbers

你也可以给网格线定义名字，注意名字需要写在[]里面。

.container{