前端CSS精讲05：Grid网格布局——现代页面最强二维布局方案

张开发
• 2026/4/18 17:50:36 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

前端CSS精讲05：Grid网格布局——现代页面最强二维布局方案
文章目录一、什么是 Grid 布局二、开启 Grid三、最核心：划分行和列1. 定义列数与宽度2. 定义行数与高度3. 自适应等分：fr 单位（Grid 神器）4. 自动适应内容四、格子之间的间距五、对齐方式（和 Flex 很像）1. 整个网格在容器里的位置2. 整个网格整体对齐六、子项：指定放在哪个格子七、最简单的通用布局示例八、Grid 与 Flex 如何选择九、本节小结大家好，我是代码搬运董，软件专业在读、前端预备攻城狮，专注用通俗的话拆解硬核前端知识。上一节我们讲了 Flex 布局，它是一维布局（要么一行、要么一列）。而 Grid 是二维布局，可以同时控制行和列，直接把页面划分为“单元格”，做复杂布局、后台管理系统、响应式版面极其方便。一、什么是 Grid 布局Grid 即网格布局，把父容器变成“网格”，可以定义多少行、多少列，然后直接把元素放进指定格子里。父容器：grid 容器子元素：grid 项目一维 Flex → 适合导航、列表、居中二维 Grid → 适合版面、卡片、后台布局二、开启 Grid.container{display:grid;}

更多文章