用 CSS Grid 把布局重排了一遍

以前我写布局，习惯一层 flex 套一层 flex。 能用，但每次想动一个元素，都要在嵌套里找半天。

这次重写，我强迫自己只用 Grid。

一行声明搞定

最舒服的是这种”自适应卡片墙”：

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

不用写媒体查询，浏览器自己决定一行放几个。 窗口拉宽，卡片自动补位；拉窄，自动换行。

一点心得

Flex 是一维的，Grid 是二维的。 当你发现自己在 flex 里又套 flex，多半就该上 Grid 了。

现在改布局，像在棋盘上挪棋子，心里有数多了。