Grid 布局里的秩序感

Flexbox 很适合处理一条轴线上的排列，而 Grid 更擅长同时管理行和列。卡片列表、仪表盘、图库和文章索引，都是它发挥得很舒服的场景。

先定义轨道

grid-template-columns: repeat(3, 1fr) 的意思是把可用空间分成三列。配合 gap，间距就不需要靠每个子元素自己背负。

响应式更自然

小屏幕下把列数改成一列，比给每个卡片写一堆宽度覆盖更直接。布局规则集中在容器上，阅读 CSS 的负担也会小很多。