CSS Grid布局与容器查询响应式设计实战

CSS Grid布局是现代前端开发中构建二维页面结构的核心方案，配合容器查询（Container Queries）的引入，响应式设计的思路从视口尺寸驱动转向了组件容器尺寸驱动。这种转变使得独立组件能够在任何容器环境中自适应排版，不再依赖全局媒体查询。本文从Grid的核心概念入手，结合容器查询的工程实践，给出完整的自适应组件布局方案。

CSS Grid二维布局模型与轨道定义

Grid布局的核心是行和列构成的二维网格。通过grid-template-columns和grid-template-rows定义网格轨道，子元素通过grid-column和grid-row指定占据的区域。

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 16px;
  min-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通过可视化字符串定义区域布局，可读性远高于逐个指定行列号。1fr表示剩余空间的等比分配，结合minmax()函数可以设置弹性轨道的上下限：

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

repeat(auto-fill, minmax(280px, 1fr))是响应式Grid的经典写法：浏览器根据容器宽度自动计算能容纳多少个280px的列，剩余空间由1fr分配。无需媒体查询即可实现卡片列表的自适应排列。

Grid子元素定位与命名网格线技巧

Grid支持通过网格线编号或名称定位子元素。网格线从1开始编号，也可以通过方括号自定义名称：

.layout {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end aside-start] 200px [aside-end];
  grid-template-rows: [header-start] auto [header-end body-start] 1fr [body-end footer-start] auto [footer-end];
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: body-start / body-end;
}

.main {
  grid-column: main-start / main-end;
  grid-row: body-start / body-end;
}

命名网格线使布局代码具备自描述性，修改轨道宽度时不需要调整子元素的定位规则。span关键字可以跨多个轨道：

.feature-card {
  grid-column: span 2;
  grid-row: span 1;
}

/* 等价写法 */
.feature-card {
  grid-column: 1 / span 2;
}

容器查询基础语法与container-type属性

容器查询（CSS Containment Level 3规范）允许根据祖先容器的尺寸应用样式，而非整个视口。使用容器查询需要两步：标记容器、编写查询条件。

/* 步骤1：标记容器 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 步骤2：根据容器尺寸编写样式 */
@container card (min-width: 500px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
}

@container card (max-width: 499px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

container-type: inline-size表示以容器的行内尺寸（宽度）作为查询维度。也可以使用size同时查询宽高，但目前浏览器对size的支持尚不完善。container-name为容器命名，在嵌套容器场景中用于区分查询目标。

基于容器查询的自适应组件设计模式

容器查询的最大价值在于实现真正独立的自适应组件。以下是一个产品卡片组件在不同容器尺寸下的自适应方案：

.product-card {
  container-type: inline-size;
  container-name: product;
}

.product {
  display: flex;
  flex-direction: column;
}

/* 宽容器：水平布局，图片在左 */
@container product (min-width: 600px) {
  .product {
    flex-direction: row;
    gap: 32px;
  }
  .product__image {
    flex: 0 0 280px;
  }
  .product__info {
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

/* 中等容器：紧凑水平布局 */
@container product (min-width: 400px) and (max-width: 599px) {
  .product {
    flex-direction: row;
    gap: 16px;
  }
  .product__image {
    flex: 0 0 140px;
  }
}

/* 窄容器：垂直堆叠（默认样式） */
@container product (max-width: 399px) {
  .product {
    flex-direction: column;
    gap: 12px;
  }
}

这套方案下，同一个产品卡片组件可以嵌入侧边栏（窄）、主内容区（中等）、全宽列表页（宽），每种场景自动选择最优布局，组件本身不感知外部页面的视口大小。

Grid与容器查询组合的仪表盘布局实战

将Grid的auto-fill特性与容器查询结合，可以构建高度灵活的仪表盘面板布局：

.dashboard {
  container-type: inline-size;
  container-name: dashboard;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* 超宽容器：3列布局 */
@container dashboard (min-width: 1200px) {
  .dashboard {
    grid-template-columns: repeat(3, 1fr);
  }
  .panel--wide {
    grid-column: span 2;
  }
  .panel--full {
    grid-column: span 3;
  }
}

/* 中宽容器：2列布局 */
@container dashboard (min-width: 768px) and (max-width: 1199px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
  .panel--wide {
    grid-column: span 2;
  }
}

/* 窄容器：单列 */
@container dashboard (max-width: 767px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

panel–wide类使面板横跨2列，panel–full类使面板占满整行。在1200px以上的容器中，可以通过组合不同尺寸的面板创建类似Bento Grid的错落布局。

浏览器兼容性处理与渐进增强方案

容器查询在Chrome 105+、Safari 16+、Firefox 110+中已全面支持。对于需要兼容旧浏览器的项目，可以使用@supports条件查询实现渐进增强：

/* 基础布局：使用媒体查询（所有浏览器支持） */
.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 增强布局：支持容器查询时覆盖媒体查询规则 */
@supports (container-type: inline-size) {
  .layout {
    container-type: inline-size;
    container-name: layout;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }

  @media (min-width: 768px) {
    .layout {
      grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
  }
}

这种方案确保旧浏览器通过媒体查询获得可用的响应式布局，而新浏览器则享受容器查询带来的组件级自适应能力。@supports (container-type: inline-size)的判断比特性查询更准确，避免了部分浏览器部分实现容器查询的情况。