CSS Grid 是现代响应式设计的核心，通过二维布局系统实现灵活的行列表格。使用 display: grid 创建网格容器，结合 fr、minmax() 和 auto-fit 或 auto-fill 实现自适应列宽，如 repeat(auto-fit, minmax(250px, 1fr)) 可创建响应式卡片布局。通过媒体查询在不同屏幕下调整 grid-template-columns，例如大屏双列、小屏单列。利用 grid-template-areas 定义布局区域，配合 grid-area 在断点中重排元素顺序，无需改动 HTML。auto-fill 保留空轨道适用于相册等规整布局，而 auto-fit 拉伸填满更紧凑。综上，Grid 赋予开发者强大控制力，减少依赖框架，提升维护性与开发效率。
CSS Grid 是现代响应式网页设计的核心工具之一。它提供了一种二维布局系统，能同时处理行和列，让页面结构更灵活、更易维护。通过结合媒体查询和自适应单位，Grid 能在不同屏幕尺寸下自动调整布局，无需依赖外部框架。
使用网格容器和网格项构建基础布局
要启用 Grid 布局，先将父元素设为网格容器：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
上面的代码创建了一个两列等宽布局，列间距为 16px。每个子元素会自动放入网格单元格中。在小屏幕上，可以改为单列：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
利用 fr、minmax() 和 auto-fit 实现自适应列
响应式设计的关键是让列宽能根据可用空间自动调整。fr 单位表示可用空间的比例分配，而 minmax() 可设定最小和最大尺寸。
立即学习“前端免费学习笔记（深入）”；
例如，实现一个卡片布局，每张卡最小 250px，最大占据一个 fr 空间：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
auto-fit 会自动计算最多能放下多少列，并拉伸填满剩余空间。当屏幕变窄时，列会自动换行，形成堆叠效果，非常适合移动端。
使用 grid-area 和媒体查询重新排列布局
Grid 允许在不同断点下改变元素的位置，而无需修改 HTML 结构。通过命名区域或指定行列，可实现布局重构。
这是使用 Swiper 插件制作的「网易智造」首页宽幅大气幻灯片效果，幻灯片共 6 幅，响应式设计，切换方式位淡入淡出，鼠标移入幻灯片区域显示左右箭头，移出隐藏箭头，同时设置了自动播放、延迟加载图片。
先定义区域：
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-rows: auto 1fr auto;
}
在移动端，可改为线性排列：
@media (max-width: 600px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
对应元素只需设置 grid-area 名称，如 header { grid-area: header; }，就能在不同设备上智能重排。
结合 auto-fill 与 minmax 实现弹性网格
auto-fill 与 auto-fit 类似，但会在容器中填充空的网格轨道。适合需要保持列数一致但内容不固定的场景。
比如相册布局：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
即使某些位置没有内容，auto-fill 仍会保留轨道，视觉更规整。可根据实际需求选择 auto-fit（紧凑）或 auto-fill（对齐）。
基本上就这些。CSS Grid 配合媒体查询和弹性单位，能高效实现各种响应式布局，减少冗余代码，提升开发效率。关键是理解网格生成机制和断点切换逻辑。不复杂但容易忽略细节。
