CSS 现代布局

Grid 二维布局

.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

一行就能实现「自适应列数 + 最小宽度兜底」。

组件不再依赖视窗宽度，而是依赖父容器宽度：

.card { container-type: inline-size; }
@container (min-width: 480px) {
  .card-title { font-size: 1.5rem; }
}

子网格继承父网格的列定义，让卡片内的标题、正文、按钮在网格里横向对齐。