CSS Grid布局实战：复杂网页排版与响应式设计落地方案

CSS Grid布局模型核心概念

CSS Grid是W3C规范的二维布局系统，同时控制元素的水平和垂直排列，相比Flexbox的一维布局更适合复杂页面结构。Grid布局通过grid-template-columns、grid-template-rows定义网格轨道，子元素通过grid-column和grid-row指定占位区域，实现精确的定位控制。Grid布局在现代浏览器中已全面支持，实际项目中Grid与Flexbox配合使用：Grid负责页面整体框架，Flexbox处理组件内部布局。

网格容器定义与轨道配置

使用display: grid创建网格容器，通过grid-template-columns定义列轨道。fr单位表示按比例分配剩余空间，minmax()设置轨道尺寸范围：

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header  header"
    "sidebar main   aside"
    "footer  footer  footer";
  gap: 16px;
  height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

grid-template-areas通过命名区域直观描述布局结构，可读性强且修改方便。每个字符串代表一行，名称对应grid-area属性。

自适应网格与repeat函数

使用repeat()和auto-fit/auto-fill实现响应式网格，无需媒体查询即可自动调整列数：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* auto-fit: 空轨道折叠为0，已有轨道拉伸填充空间
   auto-fill: 创建固定数量的轨道，空轨道保留空间
   卡片数量少时用auto-fit更紧凑 */

利用minmax()和clamp()构建流体布局：

.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30vw, 400px), 1fr));
  gap: clamp(12px, 2vw, 24px);
}

子网格与网格项定位

子网格（subgrid）允许嵌套网格继承父网格的轨道定义，保持内外列对齐：

.table-container {
  display: grid;
  grid-template-columns: 120px 1fr 1fr 100px;
  gap: 1px;
}

.table-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  background: white;
}

/* 不支持subgrid的浏览器降级方案 */
@supports not (grid-template-columns: subgrid) {
  .table-row {
    grid-template-columns: 120px 1fr 1fr 100px;
  }
}

网格项精确定位使用网格线编号：

.item-a {
  grid-column: 1 / 3;      /* 从第1条线到第3条线 */
  grid-row: 1 / 2;
}

.item-b {
  grid-column: 2 / span 2; /* 从第2条线开始跨2列 */
  grid-row: 2;
}

.item-c {
  grid-column: -3 / -1;    /* 从倒数第3条线到倒数第1条线 */
  grid-row: 3;
}

响应式布局实战：管理后台适配方案

典型管理后台布局需要适配桌面、平板和手机三种视口。使用Grid加媒体查询实现：

.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "nav    header"
    "nav    main";
  min-height: 100vh;
}

/* 平板：侧边栏收窄 */
@media (max-width: 1024px) {
  .admin-layout {
    grid-template-columns: 64px 1fr;
  }
}

/* 手机：侧边栏隐藏，抽屉弹出 */
@media (max-width: 640px) {
  .admin-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  .admin-layout .nav {
    position: fixed;
    left: 0;
    top: 56px;
    width: 240px;
    height: calc(100vh - 56px);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 100;
  }
  .admin-layout.nav-open .nav {
    transform: translateX(0);
  }
}

Grid对齐控制与间距管理

Grid提供完整的对齐属性，覆盖容器和项目两个层级：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  align-content: center;
  justify-items: stretch;
  align-items: center;
  gap: 16px 24px;
}

.grid-item {
  justify-self: end;
  align-self: start;
}

实战案例：产品卡片瀑布流布局

不等高卡片使用Grid的dense自动填充算法，实现类瀑布流效果：

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: dense;
  gap: 16px;
}

.card-tall   { grid-row: span 4; }
.card-medium { grid-row: span 3; }
.card-short  { grid-row: span 2; }
.card-wide   { grid-column: span 2; grid-row: span 2; }

@media (max-width: 1024px) { .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .masonry { grid-template-columns: 1fr; } }

grid-auto-flow设为dense会回溯填充前面留下的空位，视觉上更紧凑。代价是DOM顺序与视觉顺序可能不一致，需注意键盘导航的无障碍体验。