{
display: grid;
gap:12px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
使用grid布局：
  • 设置网格项之间的 间距（gutter）
  • 12px 表示：
    • 行与行之间：垂直间距 12px
    • 列与列之间：水平间距 12px

auto-fill：

不是固定数字，而是让浏览器自动计算能放多少列；只要容器宽度允许，就继续填充新列 ；即使没有足够的子元素，也会创建空的网格轨道（但不会显示）

minmax(280px, 1fr)：表示每一列的宽度是：

  • 最小 280px（防止列太窄）
  • 最大 1fr（即“剩余空间的一份”，自动伸缩）