编程马·菜鸟教程

Appearance

第9章：项目位置与尺寸控制 ​

在本节中，我们将介绍如何控制Grid项目的位置与尺寸，这是Grid布局的重要功能之一。

9.1 grid-column：控制项目在列方向的位置与跨度 ​

grid-column属性用于控制项目在列方向的位置与跨度，是grid-column-start和grid-column-end的简写。

语法 ​

css
.item {
  grid-column-start: <column-line>;
  grid-column-end: <column-line>;
}

/* 简写形式 */
.item {
  grid-column: <column-start> / <column-end>;
}

9.2 grid-row：控制项目在行方向的位置与跨度 ​

grid-row属性用于控制项目在行方向的位置与跨度，是grid-row-start和grid-row-end的简写。

语法 ​

css
.item {
  grid-row-start: <row-line>;
  grid-row-end: <row-line>;
}

/* 简写形式 */
.item {
  grid-row: <row-start> / <row-end>;
}

9.3 项目跨列（span）与跨行（span）用法 ​

span关键字用于指定项目跨越的列数或行数。

语法 ​

css
.item {
  grid-column: <start-line> / span <number>;
  grid-row: <start-line> / span <number>;
}

代码示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>项目跨列跨行</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item1 {
      grid-column: 1 / 3; /* 从第1列开始，到第3列结束（跨越2列） */
      grid-row: 1 / 2; /* 从第1行开始，到第2行结束（跨越1行） */
    }
    
    .item2 {
      grid-column: 3 / 5; /* 从第3列开始，到第5列结束（跨越2列） */
      grid-row: 1 / 3; /* 从第1行开始，到第3行结束（跨越2行） */
    }
    
    .item3 {
      grid-column: 1 / 2; /* 从第1列开始，到第2列结束（跨越1列） */
      grid-row: 2 / 4; /* 从第2行开始，到第4行结束（跨越2行） */
    }
    
    .item4 {
      grid-column: 2 / 3; /* 从第2列开始，到第3列结束（跨越1列） */
      grid-row: 2 / 3; /* 从第2行开始，到第3行结束（跨越1行） */
    }
    
    .item5 {
      grid-column: 2 / 5; /* 从第2列开始，到第5列结束（跨越3列） */
      grid-row: 3 / 4; /* 从第3行开始，到第4行结束（跨越1行） */
    }
  </style>
</head>
<body>
  <h1>项目跨列跨行</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
    <div class="item item4">项目4</div>
    <div class="item item5">项目5</div>
  </div>
</body>
</html>

使用span关键字 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>使用span关键字</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item1 {
      grid-column: 1 / span 2; /* 从第1列开始，跨越2列 */
      grid-row: 1 / span 1; /* 从第1行开始，跨越1行 */
    }
    
    .item2 {
      grid-column: 3 / span 2; /* 从第3列开始，跨越2列 */
      grid-row: 1 / span 2; /* 从第1行开始，跨越2行 */
    }
    
    .item3 {
      grid-column: 1 / span 1; /* 从第1列开始，跨越1列 */
      grid-row: 2 / span 2; /* 从第2行开始，跨越2行 */
    }
    
    .item4 {
      grid-column: 2 / span 1; /* 从第2列开始，跨越1列 */
      grid-row: 2 / span 1; /* 从第2行开始，跨越1行 */
    }
    
    .item5 {
      grid-column: 2 / span 3; /* 从第2列开始，跨越3列 */
      grid-row: 3 / span 1; /* 从第3行开始，跨越1行 */
    }
  </style>
</head>
<body>
  <h1>使用span关键字</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
    <div class="item item4">项目4</div>
    <div class="item item5">项目5</div>
  </div>
</body>
</html>

9.4 实操：调整单个项目位置、跨列跨行 ​

代码示例：不规则网格布局 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>不规则网格布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #2ecc71;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item1 {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }
    
    .item2 {
      grid-column: 3 / 6;
      grid-row: 1 / 2;
    }
    
    .item3 {
      grid-column: 3 / 4;
      grid-row: 2 / 4;
    }
    
    .item4 {
      grid-column: 4 / 6;
      grid-row: 2 / 3;
    }
    
    .item5 {
      grid-column: 1 / 3;
      grid-row: 3 / 5;
    }
    
    .item6 {
      grid-column: 4 / 6;
      grid-row: 3 / 5;
    }
  </style>
</head>
<body>
  <h1>不规则网格布局</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
    <div class="item item4">项目4</div>
    <div class="item item5">项目5</div>
    <div class="item item6">项目6</div>
  </div>
</body>
</html>

9.5 新手易错点：网格线编号规则 ​

网格线编号规则 ​

  • 网格线从1开始编号
  • 可以使用负数表示从末尾开始计数
  • 对于n列网格，有n+1条列网格线
  • 对于m行网格，有m+1条行网格线

常见错误 ​

  • 混淆网格线编号和列数/行数
  • 忘记网格线数量比列数/行数多1
  • 错误使用负数编号

代码示例：使用负数编号 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>使用负数网格线编号</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #9b59b6;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item1 {
      grid-column: 1 / -1; /* 从第1列开始，到最后一列结束 */
      grid-row: 1 / 2;
    }
    
    .item2 {
      grid-column: 1 / 2;
      grid-row: 2 / -1; /* 从第2行开始，到最后一行结束 */
    }
    
    .item3 {
      grid-column: 2 / -1;
      grid-row: 2 / 3;
    }
    
    .item4 {
      grid-column: 2 / -1;
      grid-row: 3 / 4;
    }
  </style>
</head>
<body>
  <h1>使用负数网格线编号</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
    <div class="item item4">项目4</div>
  </div>
</body>
</html>

实操练习 ​

  1. 创建一个4列3行的网格，尝试调整不同项目的位置和跨度
  2. 使用span关键字实现项目的跨列跨行
  3. 使用负数网格线编号实现项目的定位
  4. 创建一个不规则的网格布局，练习不同的跨列跨行组合

通过本节的学习，你已经掌握了如何控制Grid项目的位置与尺寸。这是Grid布局的重要功能之一，它可以帮助你创建更加灵活和复杂的布局，实现各种不规则的排列效果。

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

基于 VitePress 构建