4 合并grid列_grid布局笔记2——grid-template-columns、grid-template-rows

我们首先了解一下容器属性，display：grid指定一个容器采用网格布局。这样，后续的容器属性或者项目属性才能够发挥效果，这和flex布局是一样的。

display：grid；容器元素是块级元素，采用网格布局，我们也可以使容器为行内元素且采用网格布局——display：line-grid，具体取哪个值我们可以视情况而定。(注意，设为网格布局以后，容器子元素(项目)的float、display：inline-block、display：table-cell、vertical-align和column-*等的设置都将失效。)

这个属性我们一笔带过，着重学习的属性是grid-complate-columns属性和grid-complate-rows属性。在指定了网格布局以后，接着就要划分行和列。例如分为几行几列，每一行行宽和每一列列宽分别是多少。要实现这些设定，就使用了这两个属性，grid-template-columns属性定义每一列的列宽(隐性设定了几列)，grig-template-rows属性定义每一行的行高(隐性定义了几行)。让我们在代码中展示这两个属性

首先是HTML代码

1

2