通过对css的学习，我了解到了比float更好用的一种布局方式，下面记录一下：
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。
Grid布局（即网格布局）是通过一组相交的水平线和垂直线，定义了网格的列和行。grid布局是二维布局方式，可以同时控制行和列的排布。
一、Grid布局相关定义
首先，Grid布局有一些需要了解的定义：
1、网格元素
网格布局由一个父元素及一个或多个子元素组成。
2、网格轨道
一个网格轨道就是网格中任意两条线之间的空间。
3、网格单元
一个网格单元是在一个网格元素中最小的单位，类似于 表格的一个单元格。一旦一个网格元素被定义在一个父 级元素当中，那么他的子级元素将会排列在每个事先定 义好的网格单元中。
4、网格区域
网格元素可以向行或着列的方向扩展一个或多个单元， 并且会创建一个网格区域。可以理解为包含多个网格单 元。注意：网格区域的形状应该是一个矩形。
5、网格线
列与列，行与行之间的交接处就是网格线。我们可以合 理利用网格线的行号设定网格区域。网格线的编号顺序 取决于文章的书写模式。比如说在从左至右书写的语言中，编 号为 1 的网格线位于最左边。在从右至左书写的语中，编号为1的网格线位于最右边。
二、Grid布局的常用属性
只需要给外层元素设置display: grid属性即可。
接着，来看一下Grid布局的一些属性：
1、grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
（1）grid-template-columns 的值的个数代表列数，通常取值为 auto，代表网格的的宽度平均。
（2）fr单位
一个 fr 单位代表网格容器中可用空间的一等份。使用 fr定义后，当网格容器中可用空间增大（缩小），网 格轨道也随之增大（缩小）。
2、grid-gap 属性用来定义网格的间距，grid-column-gap 属性用来定义列之间的间距，grid-row-gap 属性用来定义行之间的间距。
3、grid-column-start、grid-column-end、grid-row-start、grid-row-end 分别代表网格单元开始（结束）的网格线行号（列号）。
4、grid-area 属性是第3条属性的简写，其属性值分别对应 row-start、column-start、row-end、column-end。当然其属性值有多种表示方法。
例如： grid-area: 2 / 1 / span 2 / span 3;（从第 2 行开始和第 1 列开始， 横跨 2 行 3 列）等。
5、grid-auto-flow 属性指定自动布局算法怎样运作。有column、row 等属性值，分别实现按列、行（默认）自动填充
