重新认识 CSS Grid：从布局到留白

示例文章：本文用于展示长文目录、代码块和响应式阅读体验。

界面里的秩序，常常来自看不见的网格。CSS Grid 让我们能直接描述行、列与间距，而不必让每个元素独自决定自己的位置。

先决定内容如何排列

想象一个文章列表：桌面端分成两列，手机上回到一列。内容的顺序始终保持一致，只改变它在屏幕上的排列。

.articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

@media (max-width: 760px) {
  .articles {
    grid-template-columns: 1fr;
  }
}

为什么需要 minmax

长链接、代码或图片都可能撑大一个网格项目。minmax(0, 1fr) 允许列在必要时收缩，再由内容区域处理换行或滚动。

留白也是结构的一部分

列间距负责区分相邻内容，段落间距负责表达阅读节奏。先建立少量稳定的间距，再按内容调整，比给每个元素单独找一个数字更容易保持一致。

用内容验证布局

短标题看起来整齐，不代表长标题也能成立。验证响应式布局时，需要放入长标题、无封面文章和多行摘要，并在真实的窄屏宽度下检查。

布局的任务，是让内容更容易被理解。