编程马·菜鸟教程

Appearance

第5章：网格轨道尺寸设置 ​

在本节中，我们将介绍如何设置网格轨道的尺寸，这是Grid布局的核心功能之一。

5.1 grid-template-columns：设置列轨道尺寸 ​

grid-template-columns属性用于设置网格的列轨道尺寸，定义列数和每列的宽度。

语法 ​

css
.container {
  grid-template-columns: <track-size> [<track-size> ...];
}

常用值 ​

1. 固定尺寸（px） ​

  • 固定列宽，适用于固定布局
  • 例如：grid-template-columns: 100px 200px 150px

2. 相对尺寸（%） ​

  • 相对于容器宽度，适配不同屏幕
  • 例如：grid-template-columns: 25% 50% 25%

3. 弹性尺寸（fr） ​

  • 按比例分配剩余空间，Grid布局的核心优势
  • 例如：grid-template-columns: 1fr 2fr 1fr

4. auto ​

  • 自动适应内容或容器尺寸
  • 例如：grid-template-columns: auto 1fr auto

5. repeat()函数 ​

  • 简化重复列设置，高频使用
  • 例如：grid-template-columns: repeat(3, 1fr) 等价于 grid-template-columns: 1fr 1fr 1fr

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>grid-template-columns</title>
  <style>
    .container {
      display: grid;
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .fixed {
      grid-template-columns: 100px 200px 150px;
    }
    
    .relative {
      grid-template-columns: 25% 50% 25%;
    }
    
    .flexible {
      grid-template-columns: 1fr 2fr 1fr;
    }
    
    .auto {
      grid-template-columns: auto 1fr auto;
    }
    
    .repeat {
      grid-template-columns: repeat(3, 1fr);
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>grid-template-columns 示例</h1>
  
  <h2>固定尺寸（px）</h2>
  <div class="container fixed">
    <div class="item">100px</div>
    <div class="item">200px</div>
    <div class="item">150px</div>
  </div>
  
  <h2>相对尺寸（%）</h2>
  <div class="container relative">
    <div class="item">25%</div>
    <div class="item">50%</div>
    <div class="item">25%</div>
  </div>
  
  <h2>弹性尺寸（fr）</h2>
  <div class="container flexible">
    <div class="item">1fr</div>
    <div class="item">2fr</div>
    <div class="item">1fr</div>
  </div>
  
  <h2>auto</h2>
  <div class="container auto">
    <div class="item">auto</div>
    <div class="item">1fr</div>
    <div class="item">auto</div>
  </div>
  
  <h2>repeat()函数</h2>
  <div class="container repeat">
    <div class="item">1fr</div>
    <div class="item">1fr</div>
    <div class="item">1fr</div>
  </div>
</body>
</html>

5.2 grid-template-rows：设置行轨道尺寸 ​

grid-template-rows属性用于设置网格的行轨道尺寸，定义行数和每行的高度，用法与grid-template-columns类似。

语法 ​

css
.container {
  grid-template-rows: <track-size> [<track-size> ...];
}

常用值 ​

  • 固定尺寸（px）：grid-template-rows: 100px 200px
  • 相对尺寸（%）：grid-template-rows: 30% 70%
  • 弹性尺寸（fr）：grid-template-rows: 1fr 2fr
  • auto：grid-template-rows: auto 1fr
  • repeat()函数：grid-template-rows: repeat(2, 100px)

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>grid-template-rows</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .fixed {
      grid-template-rows: 100px 150px;
    }
    
    .flexible {
      grid-template-rows: 1fr 2fr;
    }
    
    .auto {
      grid-template-rows: auto 1fr;
    }
    
    .repeat {
      grid-template-rows: repeat(2, 120px);
    }
    
    .item {
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>grid-template-rows 示例</h1>
  
  <h2>固定尺寸（px）</h2>
  <div class="container fixed">
    <div class="item">100px</div>
    <div class="item">100px</div>
    <div class="item">150px</div>
    <div class="item">150px</div>
  </div>
  
  <h2>弹性尺寸（fr）</h2>
  <div class="container flexible">
    <div class="item">1fr</div>
    <div class="item">1fr</div>
    <div class="item">2fr</div>
    <div class="item">2fr</div>
  </div>
  
  <h2>auto</h2>
  <div class="container auto">
    <div class="item">auto</div>
    <div class="item">auto</div>
    <div class="item">1fr</div>
    <div class="item">1fr</div>
  </div>
  
  <h2>repeat()函数</h2>
  <div class="container repeat">
    <div class="item">120px</div>
    <div class="item">120px</div>
    <div class="item">120px</div>
    <div class="item">120px</div>
  </div>
</body>
</html>

5.3 实操案例：不同尺寸组合，实现多列多行网格布局 ​

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>多列多行网格布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: 100px auto 150px;
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      height: 400px;
    }
    
    .item {
      background-color: #2ecc71;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item1 {
      grid-column: 1 / -1; /* 跨越所有列 */
      background-color: #3498db;
    }
    
    .item6 {
      grid-column: 1 / -1; /* 跨越所有列 */
      background-color: #3498db;
    }
  </style>
</head>
<body>
  <h1>多列多行网格布局</h1>
  <div class="container">
    <div class="item item1">头部</div>
    <div class="item">左侧</div>
    <div class="item">中间</div>
    <div class="item">右侧</div>
    <div class="item">内容</div>
    <div class="item item6">底部</div>
  </div>
</body>
</html>

5.4 新手易错点：fr单位与px/%的混用技巧 ​

常见问题 ​

  • fr单位与px/%混用导致布局错乱
  • 不知道如何计算fr单位的实际尺寸

解决方案 ​

1. 理解fr单位的计算方式 ​

  • fr单位是基于剩余空间的比例
  • 计算公式：剩余空间 = 容器宽度 - 固定尺寸总和
  • 每个fr的尺寸 = 剩余空间 / fr总和

2. 混用技巧 ​

  • 固定尺寸 + fr：grid-template-columns: 200px 1fr 1fr
  • 相对尺寸 + fr：grid-template-columns: 25% 1fr 1fr
  • 混合使用：grid-template-columns: 100px 1fr 2fr 150px

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>fr单位与px/%混用</title>
  <style>
    .container {
      display: grid;
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      margin-bottom: 20px;
    }
    
    .mixed1 {
      grid-template-columns: 200px 1fr 1fr;
    }
    
    .mixed2 {
      grid-template-columns: 25% 1fr 1fr;
    }
    
    .mixed3 {
      grid-template-columns: 100px 1fr 2fr 150px;
    }
    
    .item {
      background-color: #9b59b6;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>fr单位与px/%混用</h1>
  
  <h2>固定尺寸 + fr</h2>
  <div class="container mixed1">
    <div class="item">200px</div>
    <div class="item">1fr</div>
    <div class="item">1fr</div>
  </div>
  
  <h2>相对尺寸 + fr</h2>
  <div class="container mixed2">
    <div class="item">25%</div>
    <div class="item">1fr</div>
    <div class="item">1fr</div>
  </div>
  
  <h2>混合使用</h2>
  <div class="container mixed3">
    <div class="item">100px</div>
    <div class="item">1fr</div>
    <div class="item">2fr</div>
    <div class="item">150px</div>
  </div>
</body>
</html>

实操练习 ​

  1. 创建一个3列2行的网格，使用不同的尺寸单位
  2. 尝试使用repeat()函数简化网格轨道的设置
  3. 混合使用fr、px和%单位，实现复杂的网格布局
  4. 计算fr单位的实际尺寸，验证布局效果

通过本节的学习，你已经掌握了如何设置网格轨道的尺寸。这是Grid布局的核心功能之一，合理设置网格轨道尺寸将帮助你创建各种复杂的布局。

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

基于 VitePress 构建