css grid网格布局（栅格布局）图解+代码详细讲解【收藏】

CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使用。

简介

Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局

gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item），即container -> item

注意：Grid 布局只对项目生效，项目只能是容器的一级子元素，不包含项目的子元素

grid相关属性

下面从容器属性和项目属性两大块来记录grid布局中的相关属性

• 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。
• 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
• 间距属性： grid-column-gap 和 grid-row-gap。

使用网格布局后，项目的float、display: inline-block、display:
table-cell、vertical-align和column-*等设置都将失效。

间隙属性

• gap：定义栅格布局的行与列间隙的尺寸。
• row-gap：定义行间隙的尺寸。
• column-gap：定义列间隙的尺寸。
• grid-gap：定义栅格布局中行与列间隙的尺寸。
• grid-row-gap：定义栅格布局中行间隙的尺寸。
• grid-column-gap：定义栅格布局中列间隙的尺寸。

grid属性：

• grid-template-rows/columns：规定列和行的尺寸。
• grid-template-areas：规定使用特定命名的栅格布局。
• grid-auto-rows/columns：规定列和行的自动尺寸。
• grid-auto-flow：指定在栅格布局中元素怎样自动布局排列。

注意：CSS栅格布局起初是用grid-gap属性来定义的，目前逐渐被gap替代。

Grid 布局的使用方法

块级容器（宽度撑满整行）时,容器独占一行

display: grid;

下图是display: grid的效果：

行内容器（宽度随内容自适应）时

display: inline-grid;

下图是display: inline-grid的效果：

注意：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display:
table-cell、vertical-align和column-*等设置都将失效。

划分列 grid-template-columns

单位包括：

• 绝对值px，
• 百分比值%，
• 比例值fr，

绝对值 px：在容器内划分出3列，每列宽度为100px

grid-template-columns: 100px 100px 100px;

**百分比值 %：**将容器等分为3列，每列宽度为容器总宽度/3

grid-template-columns: 33.33% 33.33% 33.33%;

**比例值 fr：**将容器划分为2列，第1列的宽度 ：第2列的宽度 = 1:2

 grid-template-columns: 1fr 2fr;

fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用

grid-template-columns: 150px 1fr 2fr;

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

上面代码指定了一个三行三列的网格，列宽和行高都是100px

栅格间隙

所有浏览器都支持栅格布局中的间隙。

我们来创建一个包含三列两行的栅格：

.container {
   
   
	display: grid;
	grid-template-columns: 200px 100px 300px;
	grid-template-rows: 100px 100px;
	gap: 20px;
}

打开调试器可以看到的线条为栅格线，它们分隔栅格的轨道（行和列）栅格线开始像获得厚度一样20px

网络布局实例代码及效果图

网格轨道

• grid-template-columns属性：定义每一列的列宽
• grid-template-rows属性：定义每一行的行高

九宫格：实现列宽和行高都是200px的网格，即200宽高的九宫格

.container {
   
   
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows<