Gird布局

一、关于概念

网格布局（Grid）是一个很强大的 CSS 布局方案。它可以将网页划分为多个网格任意拼接的布局，可以灵活的运用并实现出多种布局形式。

(grid和inline-grid区别在于，inline-grid容器为inline特性，因此可以和图片文字一行显示；grid容器保持块状特性，宽度默认100%，不和内联元素一行显示。)

二、关于属性

Grid布局的属性和Flex相似 也分为两种，即作用域容器上和作用于子项上：

看到这么多的属性时，内心是排斥加恐惧的；但是...仔细的浏览一遍，回味过后松下一口气。看样子大都是分布和聚合的关系，和flex有些点还是很类似的，那么话不多说，开始细嚼！

· 作用在容器上的属性

2.1 grid-template-columns和grid-template-rows：分别决定了网格的每列的列宽和行高；例如：

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
}

上述代码被定义为Grid容器，然后分为两行三列共6个网格，每列的列宽为100px,每行的行高为100px；

当然，这两个属性的赋值非常灵活；

• 绝对单位 ：简单粗暴的赋值，对于定宽or定高可直接写定；
• 百分比 ： 根据容器的宽高，按百分占比进行分配；

• repeat() ：针对需重复进行赋值的场景，可利用repeat函数简化； – 函数接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

当然也可去重复一组网格规律，效果如下：

• fr 关键字 ：fr为fraction的缩写，意为分数、部分；可与相应的绝对单位一起使用，如下：

可见第一列的宽度为100像素，第二列的宽度是第三列的一半。

• minmax() ：函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

2.1 grid-row-gap：

原文地址：https://www.cnblogs.com/JessieXie/p/12141569.html