栅格布局

1.引入

我们之前学习了多个布局的方式，下面我们一起来学习一种比较重要的布局方式：栅格布局。栅格布局是一种较为特殊的弹性布局，栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。

在我们熟知的常用前端框架中都可以发现栅格布局的系统实现，如常用的bootstrap等，我们可以把栅格布局看成是类似Excel表格一样，把整个页面按照不同比例的格子划分为不同的内容，然后我们按照划分的比例，来实现页面的布局。

2.栅格布局

(1)、栅格布局中常用的样式属性

栅格布局常用的样式属性我们知道栅格布局是一种比较特殊的弹性布局，所以我们在编写栅格布局的时候会使用到比较多的弹性布局的内容，下面我们逐一列举常用的属性。display:flex;                //设置弹性布局容器
flex flow:row nowrap;        //设置flex容器水平方向排布，在内容比较多且排布不下的时候不允许换行
justfy-content:space-around; //排布内容的时候均匀排布，并且内容之间会存在这均匀的空格flex-shrink:1;               //弹性的收缩比例
flex-grow:数值;              //弹性的扩展比例，一般设置的数值就是占据宽度的比例数

(2)、基本的栅格布局

这里我们把每一个div所占据的区域划分为一个栅格内容，按照不同的比例划分出不同比例的栅格信息，然后把整个栅格内容按照所示的内容进行一个套用。我们先把需要的模板写出来，代码和实现的效果图如下:

<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">* {margin: 0px;padding: 0px;}/**定义基本的弹性布局内容**/.grid {display: flex;flex-flow: row nowrap;justify-content: space-around;}/**按照比例定义栅格的宽度和收缩比例，这里我们把他划分为8个区域**/.grid-cell-1,.grid-cell-2,.grid-cell-3,.grid-cell-4,.grid-cell-5,.grid-cell-6,.grid-cell-7,.grid-cell-8 {flex-shrink: 1;/*设置收缩比率*/padding: 3px;/*设置内边距*/}/**设置扩展比例，也可以认为是所占据的比例的数量**/.grid-cell-1 {flex-grow: 1;/*占据比例数量的1/8*/}.grid-cell-2 {flex-grow: 2;/*占据比例数量的2/8*/}.grid-cell-3 {flex-grow: 3;/*占据比例数量的3/8*/}.grid-cell-4 {flex-grow: 4;/*占据比例数量的4/8*/}.grid-cell-5 {flex-grow: 5;/*占据比例数量的5/8*/}.grid-cell-6 {flex-grow: 6;/*占据比例数量的6/8*/}.grid-cell-7 {flex-grow: 7;/*占据比例数量的7/8*/}.grid-cell-8 {flex-grow: 8;/*占据比例数量的8/8*/}.box {background-color: #00AA00;height: 50px;width: 100%;}
</style><body><div class="grid"><div class="grid-cell-1"><div class="box"></div></div><div class="grid-cell-1"><div class="box"></div></div><div class="grid-cell-1"><div class="box"></div></div><div class="grid-cell-1"><div class="box"></div></div><div class="grid-cell-1"><div class="box"></div></div><div class="grid-cell-1"><div class="box"></div></div><div class="grid-cell-1"><div class="box"></div></div><div class="grid-cell-1"><div class="box"></div></div></div><div class="grid"><div class="grid-cell-2"><div class="box"></div></div><div class="grid-cell-2"><div class="box"></div></div><div class="grid-cell-2"><div class="box"></div></div><div class="grid-cell-2"><div class="box"></div></div></div><div class="grid"><div class="grid-cell-4"><div class="box"></div></div><div class="grid-cell-4"><div class="box"></div></div></div><div class="grid"><div class="grid-cell-8"><div class="box"></div></div></div><div class="grid"><div class="grid-cell-2"><div class="box"></div></div><div class="grid-cell-6"><div class="box"></div></div></div><div class="grid"><div class="grid-cell-3"><div class="box"></div></div><div class="grid-cell-5"><div class="box"></div></div></div><div class="grid"><div class="grid-cell-5"><div class="box"></div></div><div class="grid-cell-3"><div class="box"></div></div></div><div class="grid"><div class="grid-cell-6"><div class="box"></div></div><div class="grid-cell-2"><div class="box"></div></div></div></body>