Grid 是现代 CSS 最强大的二维布局方案，相比 Flex 更适合整体页面结构搭建。本文通过10个常见布局案例，带你快速掌握 Grid 的核心属性，告别复杂的浮动与定位。
在 Grid 出现之前，我们实现复杂网格布局往往需要嵌套多层容器，配合浮动和定位才能完成。Grid 布局将容器划分为行和列，形成二维网格，子元素可以自由放置在任意单元格中，代码更简洁，可维护性更强。
入门第一步是理解容器与项目的关系。父元素设置 display: grid 后成为网格容器，直接子元素自动成为网格项目。通过 grid-template-columns 和 grid-template-rows 定义列数与行数，配合 fr 单位可以轻松实现弹性比例分配，例如 grid-template-columns: 1fr 2fr 1fr 就能快速创建三列等比例布局。
常用的几个属性各有分工： gap 控制网格间距，比 margin 更整洁； grid-column 和 grid-row 用于指定项目占据的单元格范围，实现跨列跨行布局； justify-items 与 align-items 控制单元格内的对齐方式。
实际开发中，Grid 非常适合页面整体骨架、商品列表、相册、仪表盘等场景。配合媒体查询，只需修改模板列数就能快速适配不同屏幕，是响应式布局的得力工具。掌握核心的十几个属性，就能解决绝大多数布局难题。