CSS Grid 布局入门

CSS Grid 刚出来那会儿看文档，觉得概念挺多，没急着学。后来项目里遇到了一个三栏布局的坑，用 flexbox 绕了半天，最后还是用 Grid 重写了一遍，一下就清楚了。

Grid 其实不复杂，核心就两个概念：网格容器和网格轨道。

最简单的用法

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
}

三列布局，中间列宽是两侧的两倍，用 fr 单位。fr 是 Grid 特有的单位，表示”可用空间的等分”。

自动填充

配合 minmax，可以让列数根据容器宽度自动调整：

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

这行代码的意思是：尽可能多地填充 200px 的列，每列最小 200px，最大等分剩余空间。响应式布局用它非常方便，不需要写一堆 media query。

网格线编号

每个网格线都有自己的编号，从 1 开始。可以用编号精确控制某个元素的位置：

.item {
  grid-column: 1 / 3; /* 从第1条线到第3条线，跨两列 */
  grid-row: 2 / 4;    /* 从第2条线到第4条线，跨两行 */
}

也可以给网格线起名字，这样代码更可读：

grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end];

实际应用

我现在的博客文章列表用的是这种方式：

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

每个卡片最小 300px宽，超过就自动换行。移动端自动变成单列，不需要任何媒体查询。

Grid 的坑基本只有一个：兼容性。现在主流浏览器都支持了，可以放心用。