现代双栏布局优先用grid，因其能精确控制列宽、间距和源顺序，一行声明即可定义完整布局；flex仅适合简单左右分栏，内容高度不一致时易导致右侧栏下移。

双栏布局用 flex 还是 grid？选错会影响响应式表现

现代项目优先用 grid，flex 仅适合简单左右分栏。因为 grid 能精确控制列宽、间距、源顺序，且一行声明就能定义完整布局；flex 在内容高度不一致时容易撑开容器，导致右侧栏下移。

• grid 推荐写法：display: grid; grid-template-columns: 250px 1fr; —— 左侧固定 250px，右侧自适应
• 若需响应式断点，直接加媒体查询：@media (max-width: 768px) { grid-template-columns: 1fr; }
• 避免用 float：已废弃，清除浮动易出错，且无法真正“脱离文档流”用于现代布局

article 和 aside 的语义化用法别乱套

左侧个人信息区不能全用 div 堆砌，右侧正文也不能全塞进一个 section。浏览器和读屏软件依赖语义标签判断内容权重。

• 左侧推荐结构：<aside class="profile"><h2>个人信息</h2>...</aside> —— aside 表示与主内容相关但可独立存在的信息
• 右侧主体用：<article><header><h1>标题</h1></header>...</article> —— article 明确标识独立、可复用的内容单元
• 别把导航栏（nav）或页脚（footer）塞进 aside，它们有各自语义边界

CSS 中 gap 和 margin 混用会破坏对齐

双栏之间留白，必须统一用 gap（grid）或 gap（flex），而不是给子元素加 margin。后者会导致父容器计算溢出、换行错位，尤其在移动端缩放时明显。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• grid 下：gap: 24px; 即可控制两栏间距，无需碰子元素的 margin
• 如果用了 flex，也只设 gap: 24px;（现代浏览器支持），不要给 aside 加 margin-right
• 旧浏览器兼容？降级方案是用 padding 挤出空间，而非 margin —— padding 不影响布局流

打印 A4 时双栏变单栏，@media print 必须单独处理

很多模板在浏览器里看着正常，一打印就文字重叠或右侧栏跑出纸外。这是因为打印介质没有 viewport，max-width 和 flex 行为完全不同。

• 必须加打印样式：@media print { .layout { display: block; } aside, article { width: 100%; float: none; } }
• 禁用背景色和边框（除非明确需要）：* { background: transparent !important; box-shadow: none !important; }
• 字体大小建议用 pt 单位：font-size: 12pt; —— 打印时比 px 更稳定

实际排版中，最常被忽略的是语义标签与 CSS 布局的耦合关系：用 grid 布局却套着一堆无意义 div，等于白做了语义化；或者写了 aside 却没配对应样式，导致它在小屏下仍占固定宽度。这两处一错，双栏就既不好看也不好用。

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