经过网格术语一和术语二两篇文章，我们对CSS Grid布局中术语有一定的了解。除了这两篇文章提到的术语之外，还有其他相关的术语。这篇文章主要和大家一起来探讨网格。

CSS Grid布局说的就是网格，那么网格就是其中最重要的术语之一。接下来，我们要说的就是网格相关的内容。

声明网格和网格容器

如果需要使用CSS Grid给Web页面进行布局，首先需要声明网格。在CSS中，声明网格主要方式就是通过给某个容器的display设置为grid、inline-grid或者subgrid值之一。同时这个容器就被称为网格容器，而这个容器的子元素就称为网格项目。

网格容器不是块容器(display:block)，因此在块容器中的一些属性使用并不适用于网格容器当中:

• 多列布局属性column-*不能用于网格容器
• 浮动和清除浮动，对于网格项目中使用不生效。但是，浮动的属性对于网格容器的子元素还是生效的
• vertical-align属性对于网格项目不生效
• ::first-line和::first-letter伪元素不能用于网格容器

网格容器大小

在CSS Grid布局当中，通过grid-template-rows和grid-template-columns隐式的确定了一个网格的列数、行数以及网格的大小：

.grid {
  display: grid;
  grid-template-columns: 150px 20px  300px 20px 150px;
  grid-template-rows: 100px 20px 100px 20px 50px;
}

上面代码创建了一个5 x 5的网格：

显式网格

正如前面所示，通过grid-template-rows、grid-template-columns和grid-template-areas三个属性可以显式的创建一个网格容器。而且这三个属性可以简写成grid-template。比如:

grid-template: auto 1fr / auto 1fr auto;

上面代码相当于：

grid-template-rows: auto 1fr;
gr