grid 网格布局

CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局

grid 容器

grid 容器有很多项

定义网格及 fr 单位

grid

grid-template-rows 和 grid-template-columns 用来基于网格行和列的维度，去定义网格线的名称和网格轨道的尺寸大小
单位 fr 是按剩余空间的比例计算，比如总的宽度 300px，设置 grid-template-columns: 150px 1fr 1fr 宽度分别：150px 75px 75px

合并网格及网名命名

grid-template-areas 使用命名方式定义网格区域，需配合 grid-area 属性进行使用

grid-template 是 grid-template-rows，grid-template-columns 和 grid-template-areas 的缩写

网格间隙及简写

grid-row-gap， grid-column-gap 和 grid-gap 用来设置元素行列之间的间隙大小，推荐使用 row-gap,column-gap,gap，grid- 前缀已废弃
gap 是 row-gap 和 column-gap 的缩写，比如 flex 布局也支持 gap 属性

网格对齐方式及简写

justify-items 和 align-items 默认值 stretch，指定了子项在网格中的对齐方式
place-items 是 justify-items 和 align-items 的简写
justify-content 和 align-content 默认值 stretch，指定了所有网格在 grid 容器中的对齐方式
place-content 是 justify-content 和 align-content 的简写

显式网格与隐式网格

指定在显示网格之外的隐式网格，如何排列及尺寸大小

grid-auto-flow row 默认值，行产生隐式网格，column 列产生隐式网格，可以加一个 dense 的选项
grid-auto-rows 可以调节产生隐式网格的高度
grid-auto-columns 可以调节产生隐式网格的宽度

grid 子项

分别解析

基于线的元素放置

表示 grid 子项所占据的区域的起始和终止位置，包含水平方向和垂直方向，默认值都是 auto

grid-column-start 列的开始位置
grid-column-end 列的终止位置
grid-row-start 行的开始位置
grid-row-end 行的终止位置
grid-area 是以上四个的缩写（注意顺序是： start/start/end/end），以及额外支持 grid-template-areas 设置的网格名称

基于线对齐位置的缩写方式，通过 / 作为分割

grid-column 缩写格式：[开始]/[结束]
grid-row 缩写格式：[开始]/[结束]

子项对齐方式

justify-self 自身行对齐
align-self 自身列对齐
place-self 以上两个缩写

方法 repeat() 与 minmax()

repeat() 方法以及 auto-fill 可选值，指定可重复的数字
minmax() 方法，设置最小和最大值的范围

实例

基础实例

比定位更方便的叠加布局

使用 grid 实现定位的效果

多种组合排列布局

使用 grid 实现排列布局

栅格布局

使用 grid 实现栅格布局

容器自适应行列布局

使用 grid 实现行列自适应

综合案例

实现比较复杂的布局

百度热词风云榜

只实现效果

小米商品导航菜单

只实现效果