CSS Grid 提供高效灵活的弹窗布局方案，通过 grid-template-rows 划分标题、内容、 footer 区域，结合 1fr 实现内容区自适应填充，外层 Flex 居中对齐与背景遮罩融合，确保弹窗垂直居中且内部结构清晰；利用媒体查询与 minmax() 实现响应式按钮排列与多列堆叠，适配移动端；支持动态内容下最小高度设置与滚动控制，提升可维护性与可读性。
在弹窗组件（Modal）的布局中，CSS Grid 是一种非常高效且灵活的布局方式。它能帮助开发者快速构建结构清晰、响应式强、对齐精准的弹窗界面，尤其适合复杂内容排列的场景。
使用 Grid 构建基础弹窗结构
通过将弹窗容器设置为 grid 容器，可以轻松划分标题、内容区和操作按钮区域。
示例代码：
.modal {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 16px;
height: 300px;
padding: 20px;
}
.modal-header { grid-row: 1; }
.modal-body { grid-row: 2; }
.modal-footer { grid-row: 3; }
这种结构让内容区域自动填充剩余空间（1fr），同时保持头部和底部固定高度，非常适合需要滚动正文但固定操作栏的弹窗。
实现居中与背景遮罩
结合 Flexbox 和 Grid 可以实现完美的居中弹窗。外层用 Flex 垂直居中，内部用 Grid 布局内容。
立即学习“前端免费学习笔记（深入）”；
常用模式：
.modal-overlay {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
}
.modal {
display: grid;
grid-template-rows: auto 1fr auto;
width: 400px;
max-height: 90vh;
background: white;
border-radius: 8px;
overflow: hidden;
}
这样既能保证整个弹窗在视口居中，又能利用 Grid 对内部元素进行精细化控制。
Gridster.js多列网格式拖动布局插件
下载
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
响应式网格布局适配不同设备
Grid 的媒体查询结合 minmax() 和 auto-fit 能让弹窗在不同屏幕下自动调整布局。
比如在移动端将按钮横向排列改为纵向：
.modal-footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 480px) {
.modal-footer {
grid-template-columns: 1fr;
}
}
也可以用于双栏内容在小屏下堆叠显示，提升可读性。
处理动态内容与自适应高度
当弹窗内容不固定时，Grid 能根据内容自动调整行高。配合 minmax() 可设置最小高度同时允许扩展。
.modal {
grid-template-rows: auto minmax(200px, 1fr) auto;
}
这确保了即使内容较少也不会压缩主体区域，内容过多时又能充分利用空间并配合 overflow 实现局部滚动。
基本上就这些。CSS Grid 让弹窗布局变得更直观、更可控，减少 hack 写法，提升维护性。合理使用网格线命名和 gap 属性，能让代码更清晰易读。
