display: grid 是实现等高多列最省心的现代方案，因其默认轨道对齐、无需 hack，配合 grid-template-columns 和 gap 即可；需注意 IE11 兼容性、box-sizing: border-box 前置、响应式断点重置布局及避免混用 float 等破坏性写法。
用 display: grid 实现等高多列最省心
现代项目里，display: grid 是唯一能天然保证子项等高的多列方案。Flexbox 的 align-items: stretch 虽然也能拉齐高度，但一旦内容换行或设了 min-height，就容易在不同列间出现高度不一致；而 Grid 默认所有轨道对齐，无需 hack。
关键写法：grid-template-columns: 1fr 1fr 1fr 或 grid-template-columns: 200px 1fr 200px，搭配 gap 控制间距。注意：IE11 不支持 gap，得拆成 grid-column-gap 和 grid-row-gap 单独写。
- 别在 Grid 容器里给子项加
float或display: inline-block，会破坏布局上下文 - 如果某列要横跨多行（比如侧边栏），用
grid-row: span 2，不是靠 height 模拟 - 主内容优先 SEO？加
order属性，例如.main { order: -1; }
小屏必须切单列，@media (max-width: 768px) 不能省
三栏在手机上横向挤成一条细线，用户得左右拖拽才能看全——这不是响应式，是反体验。必须用媒体查询强制改布局，且不能只改宽度，要重置整个 display 行为。
正确做法是在断点里把 grid-template-columns 改成 1fr，而不是用 display: block 覆盖。后者会让 Grid 上下文丢失，后续再切回桌面样式时可能失效。
立即学习“前端免费学习笔记（深入）”；
- 平板（768px–1024px）可选择性隐藏一侧边栏：
.sidebar-left { display: none; } - 若用 Flexbox 回退，小屏下记得重置
flex值：.column { flex: none; width: 100%; }，否则flex: 1还在抢空间 - 所有断点都基于
max-width写，符合移动优先逻辑
box-sizing: border-box 是等高布局不出错的前提
几乎所有等高错位问题，根源都在盒模型混乱。比如你设了 width: 33.33%，又加了 padding: 10px，实际宽度就变成 33.33% + 20px，三列加起来超 100%，必然折行或溢出。
全局统一：* { box-sizing: border-box; }。这句必须加在 CSS 最前面，否则子元素的 padding 和 border 会撑破设定宽度。
- 栅格类（如
.col-4）只管尺寸，内部再套一层<div class="pad">来管padding和margin - 别在参与 Grid/Flex 计算的元素上直接写
margin，它会破坏列宽比例；用gap替代 - 文字过长不换行？在子元素上加
word-break: break-word，不是父容器
兼容 IE10+ 时用 display: table-cell 而非真实 <table>
如果真要支持 IE10/11，display: table-cell 是唯一靠谱的等高方案。它复用了表格单元格的天然等高特性，但语义仍是 div，不污染 HTML 结构。
写法要点：父容器设 display: table; width: 100%; border-collapse: collapse;，子列设 display: table-cell; vertical-align: top;，再配固定或百分比宽度（如 width: 33.33%）。
- 不要用真实
<table>标签做布局——语义错误、SEO 友好度差、响应式难处理 -
vertical-align: top必须显式声明，否则默认 baseline 对齐，视觉上像“错位” - 这种方案无法响应式缩列，所以仍需配合媒体查询，在小屏下切回
display: block
真正麻烦的不是选哪种技术，而是混用——比如在 Grid 容器里给子项加 float，或在 Flex 容器里手动 calc 列宽。这类组合一旦漏掉一个 reset，调试成本远高于重写。
