现代CSS布局艺术：Container Queries、CSS Grid与渐进增强

CSS在过去几年经历了革命性的变化。Container Queries、CSS Nesting、:has() 选择器等新特性从根本上改变了我们编写CSS的方式。

Container Queries

Container Queries解决了响应式设计的核心痛点 — 组件可以根据自身容器大小而非视口大小调整样式：

css
/* 定义容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 根据容器宽度调整布局 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }

  .card__image {
    aspect-ratio: 1;
    border-radius: 0.75rem;
  }
}

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

CSS Grid 进阶技巧

Subgrid

css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  /* 所有卡片对齐到同一行，无论内容高度 */
}

Auto-fill与Minmax

css
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
  /* 无需媒体查询即可实现响应式网格 */
}

:has() 选择器

:has()被称为"父选择器"，实际上它更强大：

css
/* 当卡片包含图片时改变布局 */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* 前一个兄弟元素样式 */
label:has(+ input:required)::after {
  content: ' *';
  color: red;
}

/* 表单包含错误时 */
.form-group:has(input:invalid) {
  border-left: 3px solid var(--color-error);
}

/* 暗色主题切换 */
html:has(#theme-toggle:checked) {
  --color-bg: #0f172a;
  --color-text: #f1f5f9;
}

CSS Nesting

css
.card {
  background: var(--color-surface);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 4px 24px rgb(0 0 0 / 0.12);
  }

  & .title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  @media (width >= 768px) {
    padding: 2rem;
  }
}

Cascade Layers

css
/* 定义层级顺序 */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }
}

@layer components {
  .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    /* components层自动覆盖base和reset */
  }
}

View Transitions

css
/* 页面过渡动画 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

渐进增强策略

css
/* 基础样式 — 所有浏览器 */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
}

/* 增强 — 支持Grid的浏览器 */
@supports (display: grid) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
  }
}

/* 更进一步 — 支持Container Queries */
@supports (container-type: inline-size) {
  .hero-wrapper {
    container-type: inline-size;
  }
}

实战：构建自适应卡片系统

css
.card-grid {
  --min-card-width: 280px;
  --gap: 1.5rem;

  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--min-card-width)), 1fr)
  );
  gap: var(--gap);
}

.card {
  container-type: inline-size;
  background: var(--color-surface);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
  }

  @container (min-width: 350px) {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

总结

现代CSS已经成为一个强大的布局和样式系统。关键变化：

  1. Container Queries — 真正组件级的响应式设计
  2. :has() — 基于子元素/后继元素的条件样式
  3. CSS Nesting — 减少重复选择器，提高可读性
  4. Cascade Layers — 显式控制样式优先级
  5. Subgrid — 解决嵌套网格对齐问题

这些特性正在被所有主流浏览器支持，现在是学习和使用它们的最佳时机。