如何用css Grid实现响应式布局

css Grid通过fr单位、minmax()和媒体查询实现响应式布局，使用repeat(auto-fit, minmax(250px,1fr))可自动换行列数随屏幕缩小而减少，结合@media可针对不同断点设置列数，如小屏单列、中屏两列、大屏三列，且可用grid-template-areas定义区域提升布局可读性，尤其适用于仪表盘类固定结构，整体以简洁代码高效处理复杂响应逻辑。

CSS Grid 是实现响应式布局的强大工具，它能轻松创建二维网格结构，并根据屏幕尺寸动态调整元素排列。关键在于结合 fr 单位、minmax() 和 @media 查询 或 repeat(auto-fit) 等特性，让网格自动适应不同设备。

使用 fr 单位和 minmax 实现弹性网格

fr 单位表示可用空间的份数，配合 minmax() 可设置网格轨道的最小和最大尺寸，实现自适应列宽。

• 使用 repeat(auto-fit, minmax(250px, 1fr)) 可让容器自动换行并填充可用空间• 每个网格项最小宽度为 250px，超出则均分剩余空间• 屏幕越小，每行显示的列数越少，无需额外媒体查询

.grid-container {   display: grid;   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));   gap: 16px;   padding: 16px; }

利用媒体查询精细控制断点

在关键屏幕尺寸下，通过 media query 调整网格结构，更适合复杂布局需求。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

• 小屏使用单列堆叠• 中屏改为两列• 大屏展示三列或更复杂结构

.grid {   display: grid;   gap: 16px;   padding: 16px; }  @media (min-width: 768px) {   .grid {     grid-template-columns: repeat(2, 1fr);   } }  @media (min-width: 1024px) {   .grid {     grid-template-columns: repeat(3, 1fr);   } }

定义显式网格区域提升可读性

对于固定结构的响应式页面（如仪表盘），可用 grid-template-areas 定义区域，在不同断点重新排列。

立即学习“前端免费学习笔记（深入）”；

“`css .layout { display: grid; grid-template-areas: “header” “main” “sidebar”; grid-template-rows: auto 1fr auto; }

@media (min-width: 768px) { .layout { grid-template-areas: “header header” “main sidebar”; } }

<p>基本上就这些。Grid 的强大之处在于它用少量代码就能处理复杂的响应逻辑，特别是 auto-fit 和 minmax 的组合，几乎成了现代响应式布局的标准写法。</p>

以上就是如何用