什么是 CSS Grid？

CSS Grid 布局（网格布局）是 CSS 中最强大的布局系统。与 Flexbox 的一维布局不同，Grid 是专为二维布局设计的，这意味着它可以同时处理行和列。它解决了网页设计中“复杂框架对齐”、“不对称排版”以及“重叠元素”等长期以来的痛点，让原本需要大量 Hack 技巧的代码变得优雅且易于维护。

Grid 布局的核心优势

• 真正的二维控制： 无需嵌套多层容器即可实现复杂的行列结构。
• 精准的间距管理： gap 属性允许您统一控制行列间距，彻底告别繁琐的 margin 抵消。
• 响应式 minmax： 配合 minmax() 函数，您可以轻松创建在小屏下收缩、在大屏下自动扩展的智能网格。
• 区域命名： 支持通过 grid-template-areas 为布局块命名，让代码具有极高的可读性。

常见布局方案解析

• 圣杯布局 (Holy Grail)： 由页眉、页脚、主内容区和左右两个侧边栏组成。使用 Grid 只需要几行代码即可精准定义。
• 响应式相册： 利用 repeat(auto-fit, minmax(200px, 1fr)) ，可以让相册在不同屏幕宽度下自动调整每行显示的图片数量。
• 仪表盘 (Dashboard)： 网格系统非常适合构建数据看板，能够轻松处理不同尺寸卡片的错落排列。

常见问题 (FAQ)

Q: Grid 和 Flexbox 该选哪个？
A: 规则很简单：如果你只需要排列一行（或一列）元素，用 Flexbox；如果你需要构建一个完整的页面框架或复杂的行列交互，用 Grid。

Q: 1fr 代表什么意思？
A: fr 是分数单位（Fractional Unit）。 1fr 表示占据可用剩余空间的一份。如果有两列都是 1fr ，则它们平分空间。

Q: 兼容性如何？
A: 现代主流浏览器均已完美支持 CSS Grid。对于极少数老旧浏览器，建议提供简单的 Flexbox 作为降级方案。