要使用CSS制作简单的网格布局，可以采用CSS网格布局技术。首先需要为容器元素指定一个display属性值为grid，然后在该容器中定义行和列。
例如，在HTML中创建一个带有4列和3行的网格布局：
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>然后在CSS中，我们为.container 容器设置display: grid; ，并且使用grid-template-columns和grid-template-rows属性来定义容器中每列和每行的大小，例如：
.container {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 50px 50px 50px;
}最后，在CSS中设定.box元素将其放入到容器中的特定位置，例如：
.box {
background-color: #ccc;
border: 1px solid #999;
padding: 10px;
}
.box:nth-child(odd) {
background-color: #eee;
}
.box:nth-child(1) {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
.box:nth-child(2) {
grid-row: 1 / 2;
grid-column: 2 / 3;
}
/*...*/
.box:nth-child(12) {
grid-row: 3 / 4;
grid-column: 4 / 5;
}在上面的代码中，我们首先为.filler-boxes类添加了一些基本样式，其中.box:nth-child(odd)应用于奇数项，即使列。
.grid-item:nth-child(1)被设置为grid-row从第1行到第2行中第1列到第2列的 grid-column。其他.grid-item也按照同样的方式布置。
需要注意的是，这只是CSS网格布局的一种基础应用，尽管重点介绍了一些关键词，但实际上还有很多属性和功能可以探索。