编程马·菜鸟教程

Appearance

第15章：Grid布局进阶技巧（提升效率） ​

在掌握了Grid布局的基础用法后，本章将介绍一些进阶技巧，帮助你更高效地使用Grid布局，应对更复杂的布局场景。

15.1 minmax()函数：灵活控制网格轨道尺寸 ​

minmax()函数是Grid布局中的一个强大工具，它允许你为网格轨道设置最小和最大尺寸，非常适合响应式布局。

基本语法 ​

css
minmax(min, max)
  • min：轨道的最小尺寸
  • max：轨道的最大尺寸

常用场景 ​

1. 响应式卡片网格 ​

使用minmax()配合auto-fill或auto-fit，可以创建自适应的卡片网格：

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

这个例子中：

  • auto-fill会根据容器宽度自动填充尽可能多的列
  • minmax(250px, 1fr)表示每列最小宽度为250px，最大宽度为1fr（弹性分配剩余空间）
  • 当容器宽度变化时，列数会自动调整

2. 固定侧边栏 + 弹性主内容 ​

css
.page-container {
  display: grid;
  grid-template-columns: 250px minmax(300px, 1fr);
  gap: 20px;
}

这个例子中：

  • 侧边栏固定宽度250px
  • 主内容区最小宽度300px，最大宽度1fr（占据剩余空间）

3. 自适应高度 ​

css
.grid-container {
  display: grid;
  grid-template-rows: auto minmax(200px, 1fr) auto;
  gap: 20px;
  height: 100vh;
}

这个例子中：

  • 第一行和第三行高度自适应内容
  • 中间行最小高度200px，最大高度1fr（占据剩余空间）
  • 整个容器高度为视口高度

15.2 嵌套Grid布局 ​

Grid布局支持嵌套，你可以在一个Grid容器内部创建另一个Grid容器，实现更复杂的布局结构。

基本用法 ​

html
<div class="outer-grid">
  <div class="item1">项目1</div>
  <div class="item2">
    <div class="inner-grid">
      <div class="inner-item">内部项目1</div>
      <div class="inner-item">内部项目2</div>
      <div class="inner-item">内部项目3</div>
      <div class="inner-item">内部项目4</div>
    </div>
  </div>
  <div class="item3">项目3</div>
</div>
css
.outer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  padding: 20px;
}

.inner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.inner-item {
  background-color: #e0e0e0;
  padding: 10px;
  text-align: center;
}

嵌套Grid的优势 ​

  1. 结构清晰：通过嵌套Grid，可以将复杂布局分解为多个简单的网格，使代码更易于理解和维护
  2. 灵活性高：每个Grid容器都可以有独立的布局规则，适应不同部分的布局需求
  3. 响应式友好：可以为不同层级的Grid设置不同的响应式规则

实际应用案例 ​

产品卡片布局 ​

html
<div class="product-grid">
  <div class="product-card">
    <div class="card-header">
      <h3>产品名称</h3>
      <span class="price">¥99.99</span>
    </div>
    <div class="card-body">
      <div class="product-image">图片</div>
      <div class="product-info">
        <div class="info-grid">
          <div class="info-item">规格：中号</div>
          <div class="info-item">颜色：红色</div>
          <div class="info-item">库存：100件</div>
          <div class="info-item">评分：4.8</div>
        </div>
      </div>
    </div>
    <div class="card-footer">
      <button class="add-to-cart">加入购物车</button>
      <button class="buy-now">立即购买</button>
    </div>
  </div>
</div>
css
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
}

.card-body {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 15px;
  padding: 15px;
}

.product-image {
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.card-footer {
  display: flex;
  gap: 10px;
  padding: 15px;
  background-color: #f9f9f9;
}

button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-to-cart {
  background-color: #f0f0f0;
}

.buy-now {
  background-color: #ff6b6b;
  color: white;
}

15.3 Grid布局与Flex布局的合理选型 ​

Grid布局和Flex布局是现代CSS布局的两大核心技术，它们各有优势，适用于不同的场景。

两者的核心区别 ​

特性Grid布局Flex布局
维度二维（行和列）一维（行或列）
主要用途整体页面布局、复杂网格结构线性排列、组件内部布局
灵活性更适合复杂的二维布局更适合简单的一维布局
浏览器支持现代浏览器支持良好支持更广泛，包括旧版浏览器

合理选型建议 ​

  1. 使用Grid布局的场景：

    • 整体页面布局（头部、侧边栏、主内容、底部）
    • 复杂的卡片网格布局
    • 需要精确控制行和列的布局
    • 响应式网格布局

  2. 使用Flex布局的场景：

    • 导航栏、菜单等线性排列
    • 卡片内部的元素排列
    • 居中对齐单个元素
    • 简单的列表布局

  3. 两者结合使用：

    • 使用Grid控制整体页面结构
    • 使用Flex控制局部元素的排列
    • 例如：Grid布局的页面结构中，使用Flex布局排列导航栏的链接

实际应用案例 ​

Grid + Flex 结合布局：

html
<div class="page-container">
  <!-- 头部 -->
  <header class="header">
    <div class="nav">
      <div class="logo">Logo</div>
      <div class="nav-links">
        <a href="#">首页</a>
        <a href="#">产品</a>
        <a href="#">服务</a>
        <a href="#">关于我们</a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="main">
    <!-- 产品网格 -->
    <div class="product-grid">
      <div class="product-card">
        <div class="card-header">产品1</div>
        <div class="card-body">
          <div class="product-info">
            <h3>产品名称</h3>
            <p>产品描述</p>
            <div class="product-details">
              <span>价格：¥99.99</span>
              <span>库存：100件</span>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <button>加入购物车</button>
        </div>
      </div>
      <!-- 更多产品卡片 -->
    </div>
  </main>

  <!-- 侧边栏 -->
  <aside class="sidebar">
    <div class="sidebar-section">
      <h3>分类</h3>
      <ul class="category-list">
        <li><a href="#">分类1</a></li>
        <li><a href="#">分类2</a></li>
        <li><a href="#">分类3</a></li>
      </ul>
    </div>
  </aside>

  <!-- 底部 -->
  <footer class="footer">
    <div class="footer-content">
      <div class="footer-section">
        <h3>关于我们</h3>
        <p>公司简介</p>
      </div>
      <div class="footer-section">
        <h3>联系方式</h3>
        <p>电话：1234567890</p>
      </div>
    </div>
  </footer>
</div>
css
/* Grid整体布局 */
.page-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
}

/* Flex布局：导航栏 */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.main {
  grid-area: main;
  background-color: white;
  padding: 20px;
}

/* Grid布局：产品网格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  background-color: #f9f9f9;
  padding: 15px;
  font-weight: bold;
}

.card-body {
  padding: 15px;
}

/* Flex布局：产品详情 */
.product-details {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.card-footer {
  padding: 15px;
  background-color: #f9f9f9;
}

.card-footer button {
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #ff6b6b;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.sidebar {
  grid-area: sidebar;
  background-color: white;
  padding: 20px;
}

/* Flex布局：分类列表 */
.category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
}

.category-list a {
  text-decoration: none;
  color: #333;
  padding: 8px 0;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 20px;
}

/* Grid布局：页脚内容 */
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.footer-section h3 {
  margin-bottom: 10px;
}

15.4 常用布局场景快速实现技巧 ​

1. 居中布局 ​

使用Grid实现元素居中：

css
.center-container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.center-item {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 圣杯布局 ​

使用Grid实现圣杯布局：

css
.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "left main right"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
}

.left {
  grid-area: left;
  background-color: #f0f0f0;
  padding: 20px;
}

.main {
  grid-area: main;
  background-color: white;
  padding: 20px;
}

.right {
  grid-area: right;
  background-color: #f0f0f0;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

3. 响应式卡片网格 ​

使用Grid实现响应式卡片网格：

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

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-image {
  height: 180px;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  padding: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-description {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

4. 表单布局 ​

使用Grid实现表单布局：

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-submit {
  grid-column: 1 / -1;
  margin-top: 20px;
}

.form-submit button {
  padding: 12px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

5. 仪表盘布局 ​

使用Grid实现仪表盘布局：

css
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 20px;
}

.dashboard-title {
  grid-column: 1 / -1;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.widget {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.widget-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.widget-large .widget-content {
  height: 260px;
}

小结 ​

本章介绍了Grid布局的进阶技巧，包括：

  1. minmax()函数：灵活控制网格轨道尺寸，适用于响应式布局
  2. 嵌套Grid布局：在Grid容器内部创建另一个Grid容器，实现更复杂的布局结构
  3. Grid与Flex布局的合理选型：根据不同场景选择合适的布局技术，或结合使用
  4. 常用布局场景快速实现技巧：包括居中布局、圣杯布局、响应式卡片网格、表单布局和仪表盘布局

掌握这些进阶技巧，你将能够更高效地使用Grid布局，应对各种复杂的布局场景，提升开发效率和布局质量。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建