把一个容器的 display 设置成 grid，这个容器就可以看成是一个网格容器，容器里直接包含的子容器可以看成是这个网格里的项目，或者叫网格的单元。

先观察一下这段 html，这里有一个带 container 的容器，它里面直接包含了一些子容器，就是这些带 item 类的容器，如果我们把 container 这个类的 display 属性设置成 grid，那它里面的这些带 item 类的容器就是这个网格里的单元。

打开 grid.css 这个样式表，设置一下 .container 这个类的样式，把 display 属性的值设置成 grid，让它变成一个网格容器。保存一下文件。页面的布局跟之前没什么变化。

下面我们可以使用 grid-template-colums 这个属性设置一下网格的 column ，也就是列，或者叫网格的栏。比如我打算让这个网格有三栏内容，每个 column 的宽度是 200px，这个 grid-template-columns 属性的值就可以设置成 200px 200px 200px 。

你会发现，现在页面上显示的这个网格就会分成三栏，每一栏的宽度都是 200 像素。 想要设置一下网格的 row ，可以使用 grid-template-rows，把第一排，第二排，还有第三排的高度都设置成 200px。

如果你想设置一下 row 的默认的高度，可以暂时注释掉这个 grid-template-rows 属性，然后用一个 grid-auto-rows 这个属性，把横排的高度设置成 200px。