参考博客 CSS Grid 网格布局教程 作者： zldmz
什么是Grid布局？网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，可以做出各种各样的布局。它与flex布局有些相似，但是flex只能针对轴线排列，是一维布局，而grid将容器划分为了行和列，是二维布局，简单的来说就是grid布局比flex布局牛逼太多。
先来看看grid布局有哪些属性和flex一样，采用grid布局的元素称为’容器’，容器内部的子元素称为’项目’。
容器上的属性 display: grid 指定一个容器采用网格布局grid-template-columns 定义每一列的列宽grid-template-rows 定义每一行的行高 repeat() 接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值fr 关键字 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。auto 关键字 浏览器自动设置长度 row-gap 设置行间距column-gap 设置列间距gap 间距的简写grid-template-areas 指定区域grid-auto-flow 默认是row先行后列，column是先列后行justify-items属性设置单元格内容的水平位置align-items属性设置单元格内容的垂直位置place-items属性是合并简写形式justify-content属性是整个内容区域在容器里面的水平位置align-content属性是整个内容区域在容器里面的垂直位置 项目上的属性 grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线grid-column属性是grid-column-start和grid-column-end的合并简写形式grid-row属性是grid-row-start属性和grid-row-end的合并简写形式grid-area属性指定项目放在哪一个区域justify-self属性设置单元格内容的水平位置align-self属性设置单元格内容的垂直位置 下面逐个介绍各个属性的用法 容器属性 grid-template-columns 属性和grid-template-rows 属性 .box{ display: grid; grid-template-columns: 100px 200px 100px; //可以设置绝对单位 grid-template-columns: 1fr 2fr 1fr; //fr关键字 grid-template-columns: repeat(auto-fill, 100px); //auto-fill关键字，当容器宽度不知道时可以使用auto-fill让子元素先在同一行上排列，第一行排满后再换行 grid-template-columns: 20% 60% 20%; //可以设置百分比 grid-template-rows: repeat(3, 50px); //reapeat()函数} gap属性gap属性是row-gap(行间距) 和 column-gap(列间距)的 简写形式
.box{ display: grid; gap: 10px 20px;} grid-template-areas 属性 .box{ display: grid; grid-template-areas: "header header header" "main main side" "footer footer footer"; } grid-auto-flow 属性 .box{ display: grid; grid-auto-flow: column; //先列后行} justify-items 属性，align-items 属性，place-items 属性justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下），place-items 属性是他们两个的简写属性。
属性值有
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
这些属性表示整个内容区域在容器里面的水平垂直位置
属性值有：
start
end
center
stretch
space-around每个项目两侧的间隔相等
space-between项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly;项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
指定项目的四个边框
grid-area属性grid-area: / / / ;
它可以作为合写属性指定边框
设置单元格内容的水平垂直位置
属性值start | end | center | stretch;