模块化栅格系统本质是约束下的自由，核心控制变量为--grid-unit（最小度量单位）、--grid-columns（当前断点列数）和--grid-gutter（固定间隙），三者须严格整数倍关联，并通过@media切换，而非简单使用repeat(12, 1fr)。

模块化栅格系统本质是约束下的自由

模块化不是把页面切成固定块然后硬塞内容，而是定义一套可复用、可组合、可推演的尺寸与位置规则。它不追求“万能模板”，而是在列数、间距、最小单位这些参数上做明确取舍——比如 12列 是为了兼容 2/3/4/6 等分逻辑，8px 作为基准间距是因为它能被多数字体大小整除，也方便缩放。一旦定下这些基础参数，后续所有容器、卡片、表单的宽度和留白就不再靠“感觉”，而是查表或计算得出。

为什么不能直接用 grid-template-columns: repeat(12, 1fr)

看似简洁，但实际会破坏模块化意图：

• 1fr 在不同容器宽度下产生非整像素值，导致子元素边缘模糊或渲染错位（尤其在高DPI屏）
• 无法体现“最小单位”约束，比如你希望所有内边距必须是 8px 的整数倍，但 1fr 不保证这点
• 响应式断点切换时，repeat(12, 1fr) 无法自然过渡到 repeat(4, 1fr)，中间缺少语义层（比如“移动端单列”应显式声明为 100%，而非隐式推导）

模块化栅格真正要控制的三个变量

不是列数、不是间距、不是容器宽度——而是这三个：

• --grid-unit：CSS 自定义属性定义的最小度量单位（如 8px），所有 padding、gap、margin 都基于它计算
• --grid-columns：当前断点下的有效列数（如桌面端 12，平板 8，手机 1），用于生成 calc(100% / var(--grid-columns)) 类宽度
• --grid-gutter：列间/行间固定间隙（如 16px），必须是 --grid-unit 的整数倍，否则模块对齐失效

这三个变量用 @media 切换，其他样式全部引用它们——这才是模块化能落地的关键。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

容易被忽略的兼容性陷阱：gap 在 Flexbox 中不可靠

很多人想用 display: flex + gap 实现模块化栅格，但要注意：

• gap 在旧版 Safari（
• Flexbox 的 flex-wrap: wrap 在内容高度不一致时，会导致行高塌陷，而 Grid 的 grid-auto-rows 可控性强得多
• 模块化要求“列宽严格等分”，Flexbox 的 flex-basis 在百分比下易受父容器 padding 影响，Grid 的 grid-template-columns 更稳定

真要模块化，优先选 display: grid，别为了兼容老浏览器倒退回浮动或表格布局——那些已经不是“模块化”，只是“勉强能排”。

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