在这里，我们有6个divs显示从1到6的数字：
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
代码的预览：
要将容器变成网格，我们首先必须将显示网格应用于类：
.container {
display: grid;
}
网格板柱
为了指定列，我们给出了容器grid-template-columns。 grid-template-columns属性允许我们定义网格中将拥有多少列以及每列的宽度。
.container {
display: grid;
grid-template-columns: 100px auto 100px;
}
auto关键字在以防万一列将占用宽度中的剩余空间。
代码的预览：
网格板行
grid-template-rows允许我们定义每一行的高度：
.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px 200px;
}
代码的预览：
网格间隙或间隙
要在行和列之间设置，grid-gapor gap属性。
.container {
display: grid;
grid-template-columns: 100px auto 100px;
grid-template-rows: 50px 50px;
grid-gap: 3px;
}
说，我们希望我们的网格宽两列，长3行。在这种情况下，我们可以删除我们的第三列并添加其他行：
.container {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 200px;
grid-gap: 3px;
}
代码的预览：
