现代项目首选 display: grid，避免 float 和手动 calc()；Grid 语义清晰、天然响应式、子项等高、gap 间距可靠；IE11 需回退兼容；移动端必须 media query 切单列；注意盒模型统一与布局逻辑不混用。
现代项目直接用 display: grid，别碰 float 和手动 calc()；Flexbox 仅在需兼容 IE11 或动态等高有强依赖时才选。
为什么 grid-template-columns 是首选写法
一行定义列宽，语义清晰，天然支持响应式切换。不用管子项顺序、不用清浮动、不依赖 DOM 排列，gap 控制间距也比 margin 可靠得多。
-
grid-template-columns: 200px 1fr 200px—— 左右定宽，中间自适应 -
grid-template-columns: 1fr 2fr 1fr—— 三栏按比例伸缩（主内容占一半） - 所有子元素默认等高，无需额外 hack
- IE11 不支持
gap，得回退用grid-column-gap+grid-row-gap
移动端断点必须用 media query 切单列
小屏下三栏横向挤在一起，用户要左右滑动才能看全，体验极差。必须在 @media (max-width: 768px) 里强制改成单列。
- 直接改
grid-template-columns: 1fr，三栏垂直堆叠 - 别用
display: block覆盖，会破坏 Grid 上下文 - 如果主内容要优先显示（比如 SEO 或可访问性要求），加
order：.main { order: -1; } - 平板断点（768px–1024px）可只隐藏一侧边栏：
.sidebar-left { display: none; }
flex-direction: column 容易踩的坑
很多人在小屏用 Flexbox 改成竖排，但忘了重置子项的 flex 行为，导致高度失控或换行异常。
立即学习“前端免费学习笔记（深入）”；
- 切列方向前，先设
.column { flex: none; width: 100%; }，避免flex: 1继续拉伸 - 父容器加
align-items: stretch保证宽度撑满，否则可能留白 - IE11 对
flex: 1解析不准，建议写全flex: 1 1 auto - 内容文字过长不换行？得在子元素上加
word-break: break-word，不是父容器
box-sizing 和 margin 的隐蔽冲突
几乎所有三栏错位问题，根源都在没统一盒模型或乱用 margin。
- 全局加
* { box-sizing: border-box; }，否则width: 200px+padding: 10px= 实际占 220px - 别把
margin加在直接参与栅格计算的元素上（如.col-4），它会破坏宽度计算 - 正确做法：栅格类只管尺寸，内部再包一层
<div class="sec">来管padding和margin -
gap在 Grid/Flex 中都可用，且不会塌陷，比margin更稳
真正麻烦的不是写法本身，而是混合使用不同布局逻辑——比如在 Grid 容器里又给子项加 float，或者用 flex-wrap: wrap 试图让三栏在窄屏自动折行，结果发现根本不会折，因为默认不换行。这类细节一旦漏掉，调试时间远超重写成本。
