0、摘要

本文章主要是记录grid的相关属性，提供一览视图。主要介绍的内容有：grid-container、grid-cell。grid-container包含如下：grid-template-rows、grid-template-colums、grid-template-areas、row-gap、column-gap；grid-cell包含如下：grid-row、grid-column、grid-area；容器占位属性：Grid Lines、 Grid Areas。

1、Flex 与 Grid

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个DOM的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局（一维布局），只能设置一个方向的布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，可以看作是二维布局。所以Grid 布局远比 Flex 布局强大。可以理解为Flex画的是线条、而Grid画的是平面几何。

2、grid-container

Grid布局(网格布局)的容器，相关DOM对象设置display:grid则容器起效。容器内的DOM对象则被称之为grid-cell。

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

2.1、grid-template-rows

这个配置的是容器的，垂直方向，主要是把容器的高度做一个格子分配。可以配置的值如下：

属性值	描述
none	没有设置尺寸。如果需要，将创建行
auto	行的大小由容器的大小以及行中项的内容大小决定
max-content	设置每行的大小以取决于行中的最大项
min-content	设置每行的大小以取决于行中的最大项
length	使用合法长度值设置行的大小。

样例代码：

.grid-container {
  display: grid;
  grid-template-rows: auto auto auto auto;
}

上述代码把容器的高度分成了四份。

2.2、grid-template-colums

这个配置的是容器的，水平方向，主要是把容器的宽度做一个格子分配。可以配置的值如下：

属性值	描述
none	默认值。如果需要，将创建列
auto	列的大小由容器的大小和列中项的内容大小决定
max-content	设置每列的大小以依赖于列中的最大项
min-content	设置每列的大小以依赖于列中的最大项
length	使用合法长度值设置列的大小。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

样例代码：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

上述代码把容器的宽度分成了四份。

2.3、grid-template-areas

了解这个属性，就需要了解Grid对DOM容器做了网格的分配，配置的效果图如下： 1629512899(1).jpg

分配完成后呢，通过这个属性，可以为网格中的每个格子命名，代码如下：

.grid-container {
  display: grid;
  width: 500px;
  height: width: 500px;
  grid-template-rows: 100px 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-areas: "header header header header header"
      "nav main main main main"
      "nav main main main main"
      "nav main main main main"
      ". footer footer footer .";
}

grid-template-areas 就是为每个格子名称。名称完成后，在 grid-cell 对应的div 中就可以通过grid-area属性，控制DOM显示在header位置。

可以理解为，我声明一个div，这个样式的css 设置如下：

.headerDiv {
    grid-area: header
}

则该div 显示的就是第一行位置

2.4、row-gap

grid-row-gap属性定义网格布局中行之间间隙的大小, 也就是垂直方向的格子之间的间隙大小。

2.5、column-gap

grid-column-gap属性定义网格布局中列之间间隙的大小, 也就是水平方向的格子之间的间隙大小。

3、grid-cell

Grid布局(网格布局)的容器，grid-cell就是网格中的块。

3.1、grid-row

Grid布局，理解为平面几何。而grid-row就是几何上下方向的边。样例代码：

<div id="grid-container">
    <div class="cell_1"></div>
    <div class="cell_2"></div>
</div>

#grid-container {
  display: grid;
  width: 500px;
  height: width: 500px;
  grid-template-rows: 100px 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px 100px;
}

.cell_1 {
    grid-row: 1 / 3;
}

效果就是：

3.2、grid-column

Grid布局，理解为平面几何。而grid-row就是几何左右方向的边。样例代码：

<div id="grid-container">
    <div class="cell_1"></div>
    <div class="cell_2"></div>
</div>

#grid-container {
  display: grid;
  width: 500px;
  height: width: 500px;
  grid-template-rows: 100px 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px 100px;
}

.cell_1 {
    grid-row: 1 / 3;
    gird-column: 1 / 3;
}

效果就是： 1629515398(1).png

从这里开始，就可以很明显的感觉到二维操作的感觉: grid - row - column，感觉是画图师一样的，在展现各种布局效果。

3.3、grid-area

这个属性需要与 2.3、grid-template-areas一起使用。样例代码：

.grid-container {
  display: grid;
  width: 500px;
  height: width: 500px;
  grid-template-rows: 100px 100px 100px 100px 100px;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-areas: "header header header header header"
      "nav main main main main"
      "nav main main main main"
      "nav main main main main"
      ". footer footer footer .";
}

.cell_1 {
   grid-area: header
}

效果如下：

4、容器占位

4.1、Grid Lines

理解该属性，看下图：

1629516000(1).png

看到的 X1、X2、X3、X4、X5、X6 和 Y1、Y2、Y2、Y3、Y4、Y5、Y6，就是Grid Lines，它的作用呢，看如下代码：

.grid-container {
  display: grid;
  width: 500px;
  height: width: 500px;
  grid-template-rows: [X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
  grid-template-columns: 100px 100px 100px 100px;


.cell_1 {
    grid-row: X1 / X3;
    gird-column: 1 / 3;
}

其实是，一个重名的效果，在后续的设置中可以用该Line的名称，设置row 和 column。

Gird 这里是给各位看官建立一个概念，它还有好多其他的知识点，如 fr 和 repeat 等等。

可以到官网上进一步学习。官网

Grid 布局一览