CSS Grid 实战

前三篇把语法过完，这篇来真的。用三个完整示例把 Grid 用到实际页面里，分别是响应式网格、不规则布局、和 Flex 混合使用。

响应式网格

项目数量不固定、宽度要自适应换行的网格，核心是 minmax 和 auto-fit。minmax(200px, 1fr) 表示每列最小 200px，有剩余空间就等分放大。auto-fill 和 auto-fit 的区别要分清，auto-fill 尽量多放轨道，项目不够时空轨道也保留，右边会留白；auto-fit 把空轨道折叠掉，让现有项目拉宽填满整行。

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

容器宽 1000px 时大约放下 4 列，窄屏自动变 3 列、2 列，最后 1 列，全程不用写一个媒体查询。图片卡片列表这类场景非常好用。

不规则网格布局

杂志式页面常有通栏大图、小图错落排列，用 grid-template-areas 画出来最直观，跨行跨列全靠引号里的图。

<div class="magazine">
  <div class="feature">主图</div>
  <div class="side">侧栏</div>
  <div class="small1">小图 1</div>
  <div class="small2">小图 2</div>
  <div class="small3">小图 3</div>
  <div class="wide">通栏横幅</div>
  <div class="small4">小图 4</div>
  <div class="small5">小图 5</div>
</div>

.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "feature feature feature side"
    "small1 small2 small3 side"
    "wide wide small4 small5";
  gap: 16px;
}
.feature { grid-area: feature; }
.side { grid-area: side; }
.small1 { grid-area: small1; }
.small2 { grid-area: small2; }
.small3 { grid-area: small3; }
.wide { grid-area: wide; }
.small4 { grid-area: small4; }
.small5 { grid-area: small5; }

主图跨 3 列，侧栏占满两行高度，底部还有通栏横幅和两块小图，错落感立刻出来。哪个内容放哪块，看引号里的图一目了然。

Grid 和 Flex 混合使用

策略很简单，Grid 管整页骨架和大型区域，Flex 管组件内部的单行排列。以商品展示页为例，外层是响应式卡片网格，用 Grid；每张卡片内部文字、价格、按钮竖着排，用 Flex。

<div class="shop">
  <article class="card">
    <img src="shoes.jpg" alt="运动鞋">
    <h3>轻量跑鞋</h3>
    <p>透气网面，缓震大底</p>
    <div class="buy">
      <span class="price">￥299</span>
      <button>加入购物车</button>
    </div>
  </article>
  <!-- 更多卡片复制同一结构 -->
</div>

.shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;          /* 卡片内部竖排 */
}
.buy {
  display: flex;
  justify-content: space-between;  /* 价格和按钮两端对齐 */
  align-items: center;
}

外层网格负责卡片排几列，内层 flex 负责卡片内容排布，各管各的，互不干扰。这里用 auto-fill 而非 auto-fit，卡片数量固定时轨道宽度更稳定。

响应式适配思路

最后提一句响应式。媒体查询的断点处直接切换 grid-template-areas，整页骨架立刻重组，比如宽屏三栏，窄屏变单栏堆叠，代码只需要换引号里的图。断点怎么选、媒体查询怎么写，留到响应式专题细讲。

四篇学完，容器属性、项目属性、实战场景都过了一遍。Grid 的难点在思路转换，先把页面想成一张网格，再考虑内容怎么填。多写几个小页面练手，比背属性列表管用。