css grid搭建二维骨架只需三步：选容器设display: grid；用grid-template-columns/rows定义行列轨道；用grid-area等属性安排内容位置，并辅以gap和响应式技巧。

直接在 HTML5 页面中用 CSS Grid 搭建二维骨架，核心就三步：选容器、定行列、放内容。不需要额外框架或 JS，纯 CSS 就能立起清晰的页面结构。

定义网格容器

给最外层包裹元素（比如

或

）加上 display: grid，它就正式成为网格容器，内部直系子元素自动变成网格项目。

• 用 display: grid 创建块级网格；用 display: inline-grid 创建行内网格（较少用于页面骨架）
• 容器本身不参与布局渲染，只负责划分空间，所以无需额外设宽高，浏览器会按需计算

声明行和列轨道

用 grid-template-columns 和 grid-template-rows 明确告诉浏览器“我要几列几行、每格多大”。这是骨架成型的关键。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 固定值如 200px、百分比如 30%、弹性单位如 1fr 都可混用
• 常用简写：repeat(3, 1fr) 表示三等宽列；minmax(300px, 1fr) 让列最小 300px、有余量时均分
• 例如：grid-template-columns: 250px 1fr 300px —— 左侧菜单固定宽、中间内容自适应、右侧边栏固定宽

安排内容区域位置

通过 grid-column / grid-row 或更直观的 grid-area，把每个区块放到指定格子中。推荐配合 grid-template-areas 命名区域使用，语义清晰、不易出错。

• 先在容器上定义区域名：grid-template-areas: "header header" "nav main" "footer footer"
• 再给子元素赋名：.header { grid-area: header; }、.nav { grid-area: nav; }
• 点号 . 表示空单元格，方便留白或跳过某格

添加间距与响应式适配

用 gap 统一控制行列间距，比分别写 margin 更干净；结合媒体查询或 auto-fit + minmax() 实现响应式列数变化。

• gap: 16px 同时设置行距和列距；也可拆成 row-gap 和 column-gap
• 响应式卡片墙常用：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) —— 屏幕够宽就多列，窄了自动换行
• 媒体查询中只需改 grid-template-areas 或轨道定义，不用动 HTML 结构

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！