17370845950

实现复杂卡片 Grid 布局，核心是合理使用 CSS Grid 的网格划分、区域命名和响应式控制。不需要 JavaScript，仅靠 CSS 就能创建视觉丰富且自适应的布局。

定义基本 Grid 容器

使用 display: grid 启用网格布局，并通过 grid-template-columns 和 grid-template-rows 划分行列。配合 gap 设置卡片间距。

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(100px, auto));
  gap: 16px;
}

使用 grid-area 实现不规则布局

为特定卡片分配跨越多个行或列的位置，使用 grid-column 和 grid-row，或更直观的 grid-area。

• 大卡片占据两列：grid-column: span 2;
• 竖向长卡片占两行：grid-row: span 2;
• 精确定位区域：grid-area: 1 / 1 / 3 / 3;（起始行/列 到 结束行/列）

通过模板命名提升可读性

使用 grid-template-areas 以可视化方式设计布局，适合固定结构的复杂卡片组。

.card-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "main main sidebar"
    "main main footer";
}

.card-main   { grid-area: main; }
.card-sidebar { grid-area: sidebar; }
.card-footer { grid-area: footer; }

这种方式让布局结构一目了然，便于维护。

响应式适配不同屏幕

利用媒体查询动态调整网格结构，保证移动端体验。

• 小屏下改为单列：@media (max-width: 768px) { grid-template-columns: 1fr; }
• 使用 minmax() 和 auto-fit 实现自动换行：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
• 隐藏非关键卡片（如侧边栏）以简化移动视图

基本上就这些。掌握 grid-area 控制和响应式断点，就能灵活构建各种复杂但整洁的卡片布局。关键是先规划好区域分布，再用 CSS 实现。不复杂但容易忽略细节。