如何使用CSS实现响应式图片九宫格布局？

使用CSS实现响应式图片九宫格布局，通常有几种方法：

1. CSS Grid布局：首先定义一个grid容器，并设置行数和列数（如`grid-template-columns: repeat(3, 1fr);`），每个单元格就是`<img>`标签，然后使用`grid-gap`调整间隙。

.grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px; /* 间隙大小 */
}
.grid-item {
   padding: 5px;
   border: 1px solid #ccc;
}

2. Flexbox布局：使用`display: flex`和`flex-wrap: wrap`属性，结合`justify-content`和`align-items`对齐图片。

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 10px;
}
.item {
   flex: 1 0 calc(33.33% - 20px); /* 首字母大写表示百分比计算 */
   margin-bottom: 10px;
}

为了达到响应式，还可以添加媒体查询来调整不同屏幕尺寸下的布局。例如，在小屏幕上可能需要改变网格的列数或者图片的大小。