现代 CSS 布局：从 float 到 grid 这些年

三段历史

• float 时代：本来是为图文环绕设计的，被硬拿来排版，于是有了「清除浮动」的各种黑魔法
• flex 时代：一维布局终于有了正经方案，垂直居中变成一行 align-items: center
• grid 时代：二维布局，页面骨架可以像画表格一样直接写出来

今天该怎么选

我的习惯是分层：

1. 页面整体骨架用 grid
2. 组件内部排列用 flex
3. 只有真的需要二维对齐时才用嵌套 grid

一个常见骨架

.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 900px) {
  .page {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
}

minmax(0, 1fr) 里那个 0 很关键 —— 不写的话，长英文单词或代码块会把列撑破。

别忘的逻辑属性

direction 相关的属性现在都建议用逻辑版本：

• margin-left → margin-inline-start
• width → inline-size

写起来啰嗦一点，但垂直到从右往左的语言时不用改样式。

小结

CSS 布局的复杂度没有消失，只是从「技巧」变成了「概念」。弄清楚每个方案的适用边界，比死记写法有用。