my-react-blog

Grid 网格布局

Grid 是 CSS 中用于二维布局的强大方案。它可以同时控制行和列，非常适合卡片列表、仪表盘、相册、后台面板等结构。

Grid 适合场景

如果页面结构不是简单的一行或一列，而是需要明确的列数、行距、卡片排列和区域划分，就很适合使用 Grid。

例如：

文章卡片列表
图片宫格
后台统计面板
商品列表
页面主体区域分栏
左侧菜单 + 右侧内容布局

基础解构

下面代码表示：

1. 父元素启用 Grid

2. 子元素分成三列

3. 每列占据相同宽度

4. 每个格子之间间距为16px

CSS

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  gap: 20px;
5}

常用属性

常用属性：grid-template-columns，gap，minmax等。

grid-template-columns

定义列的结构。

CSS

1.grid {
2  display: grid;
3  grid-template-columns: 200px 1fr 1fr;
4}
5 // 也可以'repeat' 简化写法：
6  .grid {
7  grid-template-columns: repeat(3, 1fr);
8}

gap

控制行和列之间的间距。

CSS

1.grid {
2  gap: 20px;
3}
4//也可以分别设置：
5.grid {
6  row-gap: 24px;
7  column-gap: 16px;
8}

minmax

minmax 可以让列宽既有最小值，又能自动伸展。

CSS

1//minmax(0, 1fr) 在响应式布局中很常见，它能避免内容过长时把网格撑破。
2.articleGrid {
3  display: grid;
4  grid-template-columns: repeat(3, minmax(0, 1fr));
5  gap: 16px;
6}

响应式卡片网格

这个结构在博客首页很实用：

屏幕宽度	列数
桌面端	3 列
平板或小屏电脑	2 列
手机	1 列

CSS

1.articleGrid {
2  display: grid;
3  grid-template-columns: repeat(3, minmax(0, 1fr));
4  gap: 18px;
5}
6 
7@media (max-width: 1024px) {
8  .articleGrid {
9    grid-template-columns: repeat(2, minmax(0, 1fr));
10  }
11}
12 
13@media (max-width: 590px) {
14  .articleGrid {
15    grid-template-columns: 1fr;
16  }
17}

auto-fit 和 auto-fill

如果不想写太多断点，可以让 Grid 自动计算列数。

这表示：每个卡片最小宽度是 220px，空间足够时自动增加列数，空间不足时自动换行。

CSS

1.autoGrid {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
4  gap: 18px;
5}

区域布局

这种方式很适合后台页面或文档页 , Grid 还可以给页面划分命名区域。

CSS

1.layout {
2  display: grid;
3  grid-template-columns: 240px 1fr;
4  grid-template-areas: 
5    "aside main";
6  gap: 24px;
7}
8 
9.aside {
10  grid-area: aside;
11}
12 
13.main {
14  grid-area: main;
15}

使用建议

卡片列表优先考虑 Grid
简单的图标文字对齐不要用 Grid，Flex 更轻
做响应式网格时，优先使用 minmax(0, 1fr)
如果列数不固定，可以尝试 auto-fit

小结

Grid 的核心是“把空间切成行和列”。当你需要控制二维结构时，它比 Flex 更直接，也能让布局规则更清晰。