使用 CSS 制作响应式网格布局可以使用 CSS 媒体查询（@media）和 CSS Grid 布局。其中，@media 可以根据不同的屏幕尺寸应用不同的 CSS 样式，而 CSS Grid 布局则可以方便地实现网格布局。
下面是一个简单的示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
}这段代码定义了一个名为 .grid-container 的 CSS 类，其中 display: grid 表示该元素使用 CSS Grid 布局；grid-template-columns 定义了网格布局的列数和每列的最小和最大宽度，repeat(auto-fit, minmax(200px, 1fr)) 表示自适应的重复列，每列最小宽度为 200px，最大宽度为 1fr；grid-gap 则定义了每个网格之间的间距。
@media 用于在不同的屏幕尺寸下应用不同的样式。例如，当屏幕尺寸小于 768px 时，.grid-container 的列数将变为最小宽度为 150px 的自适应重复列；当屏幕尺寸小于 480px 时，列数将变为最小宽度为 100px 的自适应重复列。
需要注意的是，使用 CSS Grid 布局需要考虑浏览器的兼容性，建议在使用时检查浏览器支持情况。