响应式布局是一种网页布局技术，可以根据用户使用的不同设备自动调整页面布局以适应屏幕大小和方向的变化。下面是使用 CSS 媒体查询和 CSS Grid 布局等常见技术实现响应式布局的基本代码示例：
HTML 结构：
```html
```
CSS 代码：
```css
.container {
display: grid; /* 使用 CSS Grid 布局 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 根据屏幕大小自动调整列数 */
grid-gap: 20px; /* 格子间距 */
}
.item {
width: 100%; /* 确保在不同屏幕尺寸下都有相同的表现 */
/* 其他样式属性 */
}
```
然后可以使用媒体查询为不同屏幕尺寸设置不同的样式，以实现更灵活的响应式布局。例如：
```css
/* 针对小屏幕设备 */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* 单列布局 */
}
}
/* 针对中等屏幕设备 */
@media (min-width: 769px) and (max-width: 1024px) {
.container { /* 在此范围内设置不同的布局样式 */ }
}
/* 针对大屏幕设备 */
@media (min-width: 1025px) { /* 在此范围内设置其他的布局样式 */ }
```这样，在不同的屏幕尺寸下，就可以实现自动适应的布局效果。需要注意的是，响应式布局需要配合适配的图片、字体等素材，以达到最佳效果。同时，还需要考虑不同设备的屏幕方向变化（如横竖屏切换），以便更好地适应不同的场景。