CSS Grid：终于不用再用 float 布局了，感谢天感谢地

前端技术 Sep 30, 2025

一个前端老兵的回忆：那些年被 float 支配的恐惧

在 CSS Grid 出现之前，前端工程师的日常是这样的：

想要两栏布局？用 float: left + width: 50%
想要三栏？再 float 一个
想要垂直居中？对不起，请使用 position: absolute + top: 50% + transform: translateY(-50%) 这个组合咒语
想要等分网格？用 display: inline-block 然后被空格问题折磨一整天

每个前端开发都有一张 flexbox 打地鼠的表情包：搞定一个布局问题，冒出来三个新问题。

Grid 来了！二维布局的救星

Flexbox 解决了一维布局的问题，但当你需要同时控制行和列——比如一个 3x3 的网格——Flexbox 就开始力不从心了。就像你用筷子吃火锅完全 OK，但让你用筷子喝汤……有点为难。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px 100px;
  gap: 10px;
}

就这？对，就这几行代码，你得到了一个三列等宽、三行不等高、间距 10px 的网格。以前用 float 搞这个，你得写多少 HTML 容器和 CSS clearfix？说出来都是泪。

grid-template-areas：排版如画图

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

看到 grid-template-areas 了吗？你用字符串画了一个页面的“地图”。header 占了第一行三列，sidebar/main/aside 分别占第二行的三列，footer 占第三行三列。想改成左侧没有 sidebar？把 sidebar 换成 . 就行了！改布局就跟改字符串一样简单。