HTML5革命性布局：CSS Grid Subgrid实现复杂自适应界面

一、Subgrid核心原理

突破传统网格限制的嵌套布局方案：

<div class="card-grid">
  <article class="card">
    <header class="card-header">
      <h2>产品标题</h2>
      <span class="badge">New</span>
    </header>
    <img src="product.jpg" alt="">
    <div class="card-body">
      <p>产品描述内容...</p>
    </div>
    <footer class="card-footer">
      <span>$199</span>
      <button>购买</button>
    </footer>
  </article>
</div>

<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: subgrid; /* 关键属性 */
  grid-column: span 1;
  border: 1px solid #eee;
}

.card-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}

.card-footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 1rem;
}
</style>

核心优势：完美对齐、代码精简、响应式友好、维护性强

二、高级布局模式

1. 媒体对象布局

<div class="media-grid">
  <div class="media">
    <img src="avatar.jpg" alt="">
    <div class="content">
      <h3>用户名</h3>
      <p>评论内容...</p>
      <div class="meta">
        <span>2小时前</span>
        <button>回复</button>
      </div>
    </div>
  </div>
</div>

<style>
.media-grid {
  display: grid;
  grid-template-columns: [start] 1fr [end];
}

.media {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  gap: 0.5rem;
}

.media img {
  grid-row: span 2;
  width: 60px;
  align-self: start;
}

.content {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: start / end;
}

.meta {
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}
</style>

2. 仪表盘布局

<div class="dashboard">
  <div class="panel">
    <h2>数据概览</h2>
    <div class="metrics">
      <div class="metric">
        <span class="value">1,234</span>
        <span class="label">今日访问</span>
      </div>
    </div>
  </div>
</div>

<style>
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
}

.panel {
  display: grid;
  grid-column: span 4;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  align-content: start;
}

.metric {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 1;
  text-align: center;
}
</style>

三、创意布局实战

1. 杂志风格排版

<div class="magazine">
  <article class="featured">
    <h2>头条新闻</h2>
    <img src="news.jpg" alt="">
    <p>新闻内容...</p>
  </article>
  <article class="secondary">
    <h3>次要新闻</h3>
    <p>简短内容...</p>
  </article>
</div>

<style>
.magazine {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 300px 200px;
}

.featured {
  display: grid;
  grid-column: 1 / 6;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.featured img {
  grid-column: 4 / 6;
  grid-row: 1 / 3;
  object-fit: cover;
}

.secondary {
  display: grid;
  grid-column: 6 / 9;
  grid-template-rows: subgrid;
  align-content: center;
}

@media (max-width: 768px) {
  .magazine {
    grid-template-columns: 1fr;
  }
  
  .featured, .secondary {
    grid-column: 1 / -1;
  }
}
</style>