HTML5革命性布局：CSS Grid与Subgrid构建下一代响应式网页

一、CSS Grid核心机制

突破传统布局限制的二维网格系统：

<!-- 基础网格结构 -->
<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
  </main>
  <footer class="footer">Footer</footer>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  min-height: 100vh;
  gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content {
  grid-area: content;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  align-content: start;
}
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "footer";
  }
  .sidebar { display: none; }
}
</style>

核心优势：二维布局控制、响应式简化、代码精简、对齐精确

二、Subgrid高级应用

1. 复杂表单布局

<div class="form-grid">
  <div class="form-section">
    <label>姓名</label>
    <div class="input-group">
      <input type="text" placeholder="姓">
      <input type="text" placeholder="名">
    </div>
  </div>
  
  <div class="form-section">
    <label>地址</label>
    <div class="input-group">
      <input type="text" placeholder="街道">
      <input type="text" placeholder="城市">
      <select>
        <option>选择省份</option>
      </select>
    </div>
  </div>
</div>

<style>
.form-grid {
  display: grid;
  grid-template-columns: [labels] auto [controls] 1fr;
  gap: 1em 2em;
}

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

.input-group {
  display: grid;
  grid-column: controls;
  grid-template-columns: subgrid;
  gap: 0.5em;
}
</style>

2. 媒体卡片嵌套网格

<div class="card-grid">
  <article class="card">
    <img src="product.jpg" alt="">
    <div class="card-content">
      <h3>产品名称</h3>
      <div class="meta">
        <span>¥199</span>
        <button>购买</button>
      </div>
    </div>
  </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;
}

.card-content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2 / 4;
  padding: 1rem;
}

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

三、创意布局实战

1. 杂志风格排版

<div class="magazine">
  <div class="featured">
    <h2>封面故事</h2>
    <img src="cover.jpg" alt="">
  </div>
  <div class="article">
    <h3>科技趋势</h3>
    <p>内容...</p>
  </div>
  <div class="ad">
    <img src="ad.jpg" alt="">
  </div>
  <!-- 更多区块 -->
</div>

<style>
.magazine {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}

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

.featured h2 {
  grid-column: 1 / 4;
  align-self: end;
}

.featured img {
  grid-column: 4 / -1;
  height: 100%;
  object-fit: cover;
}

.article {
  grid-column: span 3;
}

.ad {
  grid-column: span 2;
  grid-row: span 2;
}
</style>