Grid布局笔记1——基本概念的理解-grid设置

Grid布局十分的强大，它采用网格布局的形式，将网页划分为一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的CSS框架去达到的效果，现在浏览器内置了。

想要学习Grid布局，我们要了解它的一些设定或者说基本概念，这样在后续的学习中才可以更快、更好的掌握。

第一个概念就是容器和项目。和flex布局类似，采用网格布局的区域，称为“容器”（container）。容器内部采用网格定位的子元素，称为“项目”（item）。注意是子元素，子元素内的元素不是项目。

<div class="container">
 <div class="item">
 <p>1</p>
 </div>
 <div class="item">
 <p>2</p>
 </div>
 <div class="item" >
 <p>3</p>
 </div>
 <div class="item">
 <p>4</p>
 </div>
</div>

看上面的HTML代码，我们为.container 加上Grid布局

.container{
 display: grid ;
}

这个时候，最外层拥有class——.container的<div>元素就是“容器”，它的子元素——拥有class——.item的<div>元素就是“项目”，<p>元素就不是“项目”，因为它是容器的“孙子辈”。

第二个概念——行和列，容器中的水平区域称为“行”(row)，垂直区域称为“列”(column)。注意这里的“行”或者“列”的概念指的都是区域，不是线。看下图

在上图中，我们把容器分为了两行两列，标号1和2的矩形占据了第一行，标号3和4的矩形占据了第二行，标号1和3的矩形占据了第一列，标号2和4的矩形占据了第二列。

第三个概念——单元格，行和列交叉区域，称为“单元格”（cell）。正常情况下，n行和m 产生n*m个单元格。例如上面的图片，两行两列产生4个单元格，分别是标号1、2、3 、4占据的矩形区域。

第四个概念——网格线，划分网格的线，称为“网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n+1条水平网格线，m列有m+1条垂直网格线。我们对上面的图片进行加工，将水平网格线用黑线标识一下，将垂直网格线用蓝色标识一下

可以看到，水平网格线（黑色线）有三条，垂直网格线（蓝色线）有三条。

以上就是Grid布局的基本概念。