Grid栅格布局

2020-12-11

入门

CSS网格布局是CSS中功能最强大的布局系统。它是一个二维系统，这意味着它既可以处理列又可以处理行，而flexbox很大程度上是一维系统。通过将CSS规则应用于父元素（成为Grid容器）和该元素的子元素（成为Grid Items），可以使用Grid Layout。
Grid做响应式布局时很方便，auto-fit和auto-fill这两个属性不用媒体查询也能达到响应式的效果；
Grid可以理解为Flexbox的升级版，感觉上有点像早期的表格，一个版面划分若干个块；
目前兼容性不是很好，如果要兼容老设备（早期的安卓就不行）要注意了，最好还是用flex，和浏览器一样，老设备都淘汰了，Grid就是主流的用法了。

Grid布局通俗用法：

定义容器display为Grid，定义横线，定义竖线，格子就出来了；
内容要占几个格子，定义内容的起始横竖线就行。

属性

容器这些属性就是定义线条，画线条用的，excel大家都用过的，想像一下都差不多；
画完线条，里面的内容占几个格子，相当于你合并单元格差不多；网格项属性就是干这个的

网格容器(Grid Container) 属性

属性	值	属性说明
display	grid \| inline-grid	首先把容器定义成grid才能生效
grid-template-columns grid-template-rows grid-template-areas grid-template	<track-size> ... \| <line-name> <track-size> ...	划分列，可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
	<track-size> ... \| <line-name> <track-size> ...	划分行，同上
	<grid-area-name> \| . \| none \| ...	通过引用 grid-area 属性指定的网格区域(Grid Area) 名称来定义网格模板
		grid-template-rows, grid-template-columns, grid-template-areas三个的简写形式
grid-column-gap grid-row-gap grid-gap	line-size	网络线的宽度（块与块之间的间隙）：列
	line-size	网络线的宽度（块与块之间的间隙）：行
	grid-row-gap, grid-column-gap	间隙宽度简写
justify-items align-items place-items	start \| end \| center \| stretch \| space-around \| space-between \| space-evenly	内轴对齐：横向
		内轴对齐：纵向
	align-items, justify-items	上面两个的简写形式
justify-content align-content place-content	start \| end \| center \| stretch \| space-around \| space-between \| space-evenly	内容的对齐方式：横向
		内容的对齐方式：纵向
	justify-content, align-content	上面两个的简写形式
grid-auto-columns	<track-size> ...	网格自动列
grid-auto-rows	<track-size> ...	网格自动行
grid-auto-flow	row \| column \| row dense \| column dense	网格自动流
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow	属性的简写

网格项(Grid Items) 属性

属性	值	属性说明
grid-column-start grid-column-end grid-row-start grid-row-end	<number> \| <name> \| span <number> \| span <name> \| auto	列起始轴线值
		列结束轴线值
		行起始轴线值
		行结束轴线值
grid-column grid-row		grid-column-start + grid-column-end 的简写形式
grid-column grid-row		grid-row-start + grid-row-end 的简写形式
grid-area	grid-area: <name> \| <row-start> / <column-start> / <row-end> / <column-end>;	grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写形式
justify-self		沿着 inline（行）轴线对齐网格项（相反的属性是 align-self ，沿着 block（列）轴线对齐）。此值适用于单个网格项内的内容。

计算值

除了以前的常规单位：px % em rem vw vh…，Grid提供了一些新的方法和单位来满足需求；

repeat( integer,track list)
重复行和列函数，语法：repeat( [ <integer > | auto-fill | auto-fit ] , <track-list> )，repeat(重复次数，重复项)
示例：
- grid-template-columns: repeat(3, 33.33%)
- grid-template-columns: repeat(2, 100px 20px 80px);
- grid-template-columns: repeat(auto-fill, 100px);
- grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;
minmax（min-content，1fr）
minmax（最小，最大），定义一个大小范围，该范围大于或等于min且小于或等于max。如果max小于min，则max将以min为底（基本上产生minmax（min，min））
示例：
- grid-template-columns: 1fr 1fr minmax(200px, 1fr);
fr
比例/倍数，如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
示例：
- grid-template-columns: 1fr 1fr;
auto-fill自动填充 auto-fit自动调整
这两个用在repeat()里的，当所有内容总宽比容器宽度大的时候这两家伙没区别，填满空间；
当所有内容总宽比容器宽度小的时候区别就有了，auto-fill是以minmax的最小宽度来尽量显示更多格子，会留一截空白，auto-fit则是把没分配完的空白再分配给格子，即没有空白了
示例：
- grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
- grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));

示例

日常用的多的就是，对对齐，划划框，示例的样式用的是SCSS，示例供参考，算是抛砖引玉吧；

对齐

对齐属性和FLEX的差不多

align-items 与 align-content区别
水平对齐 justify-content start 左 center 居中 end 右
垂直对齐 align-content start 顶部 center 居中 end 底部

html

1
2
3

<div class="box">
  <div class="item"></div>
</div>

.box {
    display: grid;
  .item { 
    justify-content: start;//横向左对齐
    justify-content: center;//横向居中
    justify-content: end;//横向右对齐

    align-content: start;//纵向顶部对齐
    align-content: center;//纵向居中
    align-content: end;//纵向底对齐
  }
}

组合排列

兼容性

参考来源：
W3C CSS网格布局
 Grid完整指南
 网格布局 - mozilla
CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 网格布局教程-阮一峰