关于Grid网格布局的用法整理

CSS传统布局一般都是基于盒状模型，有例如div+CSS，利用positon, float等布局，灵活性较高，但对于一些特殊布局（垂直居中）实现起来相当麻烦。

flex弹性布局较好的解决了这个问题，同时flex的兼容性也相当不错，除了IE8.9以及其他浏览器一些低版本之外，基本上兼容现在主流的浏览器，如果没有特别需要保证IE的兼容性可以放心使用。

flex是一维布局，即行列同时只能操作一个的，具体用法可参照：阮一峰Flex布局教程

Grid布局与flex布局有类似的部分，建议学完flex布局再学习Grid，与flex不同的是Grid是基于网格的二维布局，可以同时处理行与列，将子元素看作网格元素进行处理，可以简单的实现一些主流布局。

但是，Grid的兼容性却是一个较大的问题，从图中可以看到，大部分浏览器的低版本都无法兼容Grid，所以Grid的工程使用需要谨慎。

与flex类似，在Grid中也有容器（Container）与项目（item）概念，对应父容器和子元素，下面简单总结Grid的相关用法：

一、容器属性

设置Grid布局：

//指定一个容器采用网格布局，作为块级元素
div{
	display:grid;
}
//指定一个容器采用网格布局，作为行内元素
div{
	display:inline-grid;
}

划分行列：

//grid-template-colunms表示列
//grid-template-rows表示行
//划分了4个高宽各为30px的方块，除了px等长度单位也可以用百分比
.container{
	display:grid;
	grid-template-colunms:30px 30px;
	grid-template-rows:30px 30px;
}

//repeat() 
//第一个参数表示重复的次数，第二个参数表示要重复的值
.container{
	display:grid;
	grid-template-columns:repeat(2,50%);
	grid-template-rows:repeat(2,100px 50px); 
}

//auto-fill
//希望每一行每一列尽可能容纳多的单元格，自动填充
.container{
	display:grid;
	grid-template-columns:repeat(auto-fill,100px)；
}

//fr
//fraction的缩写，表示片段，用来表示比例关系
.container{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows:130px 1fr 2fr
}

//minmax()
//表示长度在这个范围之内
.container{
	display:grid;
	grid-template-columns:minmax(100px,1fr);
}

//auto
//表示由浏览器自己决定长度
.container{
	display:grid;
	grid-template-columns:100px auto;
}

//为网格线定义名称
//允许同一根线有多个名字
.container{
	display:grid;
	grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4];
}

设置行列间隔

//grid-row-gap表示行间隔
//grid-column-gap表示行间隔
.container{
	grid-row-gap:10px;
	grid-column-gap:20px;
}

//grid-gap是前面行列两者的缩写,第二个值省略时，则默认等于第一个值
//上面一段代码等同于:
.container{
	grid-gap:10px 20px;
}

指定某个区域

//grid-template-areas用于指定某块区域，可以由一个单元格或多个单元格组成
//以下划分为9个区域,每个区域3个单元格，按顺序命名为a~i
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

//以下划分为3个区域,每个区域3个单元格，按顺序命名为a~c
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a a a'
                       'b b b'
                       'c c c';
}

//以下划分为6个区域,不需要利用的用点（.)表示
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a . c'
                       'd . f'
                       'g . i';
}

单元格排放顺序（先行后列或先列后行）

//grid-auto-flow
//决定子元素排放顺序
.container {
  grid-auto-flow: column; /*先列再行*/
  grid-auto-flow: row; /*先行再列*/
  grid-auto-flow: column dense; /*先列再行并尽可能填满*/
  grid-auto-flow: row dense; /*先行再列并尽可能填满*/
}

单元格的位置

//justify-items设置单元格水平位置
//align-items设置单元格垂直位置
//palce-items是上面两者的缩写
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: <align-items> <justify-items>;
}

内容区域在容器的位置

//justify-content设置整个内容区域在容器的水平位置
//align-content设置整个内容区域在容器的垂直位置
//palce-content是上面两者的缩写
//space-around项目两侧间隔相等 space-between项目与项目间隔相等 space-evenly项目之间间隔相等，容器与项目边框间隔也相等
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  place-items: <align-content> <justify-content>;
}

二、项目属性

指定项目位置

//grid-column-start属性：左边框所在的垂直网格线
//grid-column-end属性：右边框所在的垂直网格线
//grid-row-start属性：上边框所在的水平网格线
//grid-row-end属性：下边框所在的水平网格线
//下面指定了1号项目左边框是第2根垂直网格线，右边框是第四根垂直网格线
.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

//span表示跨越几个网格
//以下代码表示1号项目跨越2个网格
.item-1 {
  grid-column-start: span 2;
  grid-column-end: span 2;  /*两者效果一样*/
}

//grid-column是grid-column-start和grid-column-end的缩写
//grid-row是grid-row-start和grid-row-end的缩写
.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

指定项目放置区域

//grid-area表示指定项目放在哪一块区域
//下面表示将项目1放置在区域e位置
.item-1 {
  grid-area: e;
}

//可以将grid-area用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写
.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

指定单位格位置

与上述容器属性的单元格位置 justify-items 用法设置完全一致，区别在于只针对单个项目

//justify-self设置单个单元格的水平位置
//align-self设置单个单元格的垂直位置
//place-self以上两者缩写
.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <align-self> <justify-self>;
}