从零实现一个响应式 CSS 网格布局

栅格布局最容易被误解成先画格子再塞内容。实际做法相反：先列出内容的最小单元，再让网格根据可用宽度自动排列。这样在手机、平板和宽屏之间，只需要调整列的最小宽度，不必为每个断点写一套规则。

让列自己决定换行

repeat、auto-fit 与 minmax 组合起来，可以表达“每列至少这么宽，能放几列就放几列”。相比固定列数，它更适应内容长度，也减少断点。间距用 gap 统一管理，避免再用 margin 抵消。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

好的响应式布局不是为每个屏幕写一套样式，而是让规则在空间变化时自然生效。

• 先用内容确定最小列宽。
• 用 gap 管理间距，不用负边距。
• 卡片内部保持独立的对齐规则。
• 窄屏检查长标题和长链接。

需要提醒的是，自动排列适合卡片和文章列表，不适合需要严格对齐的表格。后者仍应使用显式列模板，并在窄屏提供横向滚动或改为堆叠。布局方案没有通用答案，先看内容关系，再看屏幕尺寸。

实现完成后，用浏览器开发者工具从三百二十像素开始拖动宽度，观察每一项在什么时候换行。把发生拥挤的位置记下来，再决定是调整最小列宽，还是修改内容本身。网格只是规则，真正决定阅读体验的仍是内容组织。

网格写完后，别忘了检查键盘焦点与阅读顺序。视觉顺序可以用 order 调整，但辅助技术读取的顺序仍取决于文档结构。能用源码顺序表达的关系，就不要靠布局技巧去补。真正稳定的布局，在样式加载失败时也应当保持可读。