使用 CSS 制作栅格布局的关键是使用 display: flex; 和 flex-wrap: wrap; 属性来创建一个弹性容器，并在该容器中使用子元素的 flex-basis、flex-grow 和 flex-shrink 属性来确定每个子元素的大小和位置。
具体步骤如下：
在 HTML 文件中创建一个容器，可以使用 <div> 标签，并为其添加一个类名，例如：<div class="container"></div>。
在 CSS 文件中为容器添加以下样式：
.container {
display: flex;
flex-wrap: wrap;
}这将使容器成为一个弹性容器，并允许其子元素在需要时换行。
在容器中添加子元素，可以使用 <div> 或其他 HTML 元素，并为其添加一个类名，例如：<div class="item"></div>。
在 CSS 文件中为每个子元素添加以下样式：
.item {
flex-basis: 25%; /* 设置子元素的基础宽度为容器宽度的四分之一 */
flex-grow: 1; /* 允许子元素在必要时增长以填充空间 */
flex-shrink: 1; /* 允许子元素在必要时缩小以适应空间 */
}这将使每个子元素占据容器的四分之一，允许它们在必要时增长或缩小以适应剩余空间。
可以根据需要调整子元素的大小和位置，例如：
.item:nth-child(2) {
flex-basis: 50%; /* 将第二个子元素的基础宽度设置为容器宽度的一半 */
}这将使第二个子元素占据容器的一半，而其他子元素仍将占据四分之一。
通过以上步骤，就可以使用 CSS 制作栅格布局。需要注意的是，以上仅是基本的实现方式，具体的样式和布局可以根据实际需求进行调整和修改。