快速搭建网页整体网格框架只需三步：第一步声明容器，设display: grid开启网格上下文；第二步用grid-template-columns/rows定义行列轨道，如250px 1fr 300px或repeat(auto-fit, minmax(300px, 1fr))；第三步用gap统一设置间距，避免使用margin破坏布局流。

快速搭建网页整体网格框架，关键不在“写得多”，而在“定义得准”——只需三步：声明容器、划分行列、留出间距。真正卡住新手的，往往不是语法记不住，而是漏掉了显式定义轨道这一步。

第一步：给最外层容器设 display: grid

选中页面最顶层的布局容器（比如 或一个包裹全部内容的 <div class="layout">），加上： <ul> <li> <code>display: grid —— 这只是开启网格上下文，不生成任何列或行

必须紧接着定义行列结构，否则后续定位（如 grid-column: 1 / 3）完全无效

避免直接在 上设 grid，推荐用语义化 wrapper 元素，更易维护和嵌套

第二步：用 grid-template-columns/rows 划出主框架

根据页面典型结构（如 header / sidebar / main / footer），用比例或响应式写法一次性定好骨架：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 三栏布局常用：grid-template-columns: 250px 1fr 300px（固定侧边栏 + 自适应主区 + 固定右侧栏）
• 响应式通用写法：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) —— 小屏单列，大屏自动多列，空轨道自动收起
• 行方向建议先用 auto 或 minmax()，例如：grid-template-rows: auto 1fr auto（头部自适应、主体撑满、底部自适应）
• 别混用单位，比如 200px 1fr 50% 容易因基准混乱导致错位

第三步：用 gap 统一控制内边距，别碰 margin

网格项之间的空隙，必须由容器统一管理：

• 写 gap: 16px 即可同时设置行距和列距（旧属性 grid-gap 已废弃）
• 每个项目单独加 margin-bottom 或 margin-right 会导致最后一行/列多出空白，且破坏响应式流
• 若某区域需更大留白（如标题区下边距），用 padding 或额外空格元素，而非靠 margin 挤出来

进阶提示：命名区域适合复杂结构，别过早用

当页面含多个语义区块（如仪表盘、后台首页），可用 grid-template-areas 提升可读性：

• 先写结构字符串：grid-template-areas: "header header" "sidebar main" "footer footer"
• 再给子元素设 grid-area: header 等对应名称
• 简单两栏或卡片列表，直接用 grid-column 定位更轻量、调试更直观
• HTML结构调整时，CSS 中的字符串必须同步修改，引号和空格都容易出错，小项目慎用