CSS Grid 是一种强大的布局系统，允许开发者通过简单的规则定义复杂的网格布局。在开发中，使用 CSS Grid 可以轻松实现元素的跨行跨列功能，这对于创建灵活、响应式的布局非常有用。本篇博客将详细讲解如何通过 CSS Grid 实现跨行跨列布局，包括基本概念、常见场景、实现方式以及一些注意事项。

一、CSS Grid 基本概念

CSS Grid 布局是一种二维的网格系统，允许我们同时在行和列方向上控制元素的布局。网格由 行（rows） 和 列（columns） 组成，每个网格项（grid item）都可以被放置在网格中的特定位置上。

网格容器（Grid Container）: 包含所有网格项的父容器。
网格项（Grid Item）: 容器内的子元素，布局时可以指定其在网格中的位置和跨越的行、列数。

使用 display: grid; 可以创建一个网格容器，随后通过定义 grid-template-columns 和 grid-template-rows 来控制列宽和行高。

二、跨行跨列的原理

在 CSS Grid 中，可以通过以下属性来实现元素的跨行和跨列：

跨列：使用 grid-column 属性，它指定网格项从哪个列开始、跨越多少列。

grid-column-start：元素在哪一列开始。
grid-column-end：元素在哪一列结束。

跨行：使用 grid-row 属性，它指定网格项从哪一行开始、跨越多少行。

grid-row-start：元素在哪一行开始。
grid-row-end：元素在哪一行结束。

属性 grid-column 和 grid-row 允许我们指定开始和结束值，从而实现跨越多行或多列的布局。

三、跨行跨列的实现

1. 创建基础的 Grid 布局

首先，我们创建一个 3 列 3 行的网格布局，定义列宽和行高。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列，等宽 */
  grid-template-rows: repeat(3, 100px); /* 3 行，每行 100px */
  gap: 10px; /* 设置网格项之间的间距 */
}

.item {
  background-color: lightblue;
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

HTML 结构如下：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

此时每个 .item 将按顺序占据 3x3 网格中的一个格子。

2. 跨列布局

假设我们希望第 1 个网格项（item 1）占据第一行的两列。我们可以通过 grid-column 属性来实现：

.item:nth-child(1) {
  grid-column: span 2; /* 跨越 2 列 */
}

此时，item 1 将跨越第 1 列和第 2 列，横跨两个列宽。

3. 跨行布局

同样，如果希望 item 4 跨越两行，可以使用 grid-row 属性：

.item:nth-child(4) {
  grid-row: span 2; /* 跨越 2 行 */
}

此时，item 4 将占据第 2 列和第 3 列，并向下扩展到第 3 行。

4. 同时跨行跨列

我们还可以同时让一个网格项跨越多行和多列。比如让 item 7 同时跨越两行和两列：

.item:nth-child(7) {
  grid-column: span 2; /* 跨越 2 列 */
  grid-row: span 2;    /* 跨越 2 行 */
}

此时，item 7 将占据左下角的四个格子。

四、具体示例

我们可以通过一个综合示例来展示跨行跨列布局的效果。

:root {
            --bg-color: #646cff;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 列 */
            grid-template-rows: repeat(5, 100px);  /* 5 行 */
            gap: 10px;
            color: #f0f0f0;
        }

        .item {
            background-color: var(--bg-color);
            border: 1px dotted red;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
        }

        .item:nth-child(1) {
            grid-column: span 2; /* 跨 2 列 */
        }

        .item:nth-child(3) {
            grid-column: 3 / 5;  /* 从第 3 列开始，跨到第 5 列 */
        }

        .item:nth-child(5) {
            grid-row: span 2;    /* 跨 2 行 */
        }

        .item:nth-child(7) {
            grid-column: span 2; /* 跨 2 列 */
            grid-row: span 2;    /* 跨 2 行 */
        }

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

结果展示：

item 1 将跨越第一行的前两列。
item 3 将从第三列跨到第四列。
item 5 将从第二行开始，跨越两行。
item 7 将占据最右下角的四个格子。

五、注意事项

轨道系统：CSS Grid 使用的是轨道系统（grid lines），grid-column 和 grid-row 的值是基于网格线的索引（从 1 开始）。例如 grid-column: 1 / 3; 表示从第 1 列开始到第 3 列结束（不含第 3 列）。
自动填充：在某些场景下，未指定具体位置的网格项会根据剩余的空间自动排列。跨行或跨列时，要确保网格项的位置不会和其他项目冲突。
响应式布局：利用 auto 和 fr 等单位可以实现响应式网格布局，使得跨行跨列的项目在不同屏幕下仍然保持良好的布局效果。

六、总结

CSS Grid 提供了一种直观且强大的跨行跨列布局方式，通过简单的 grid-column 和 grid-row 属性，可以实现复杂的网页布局。无论是在静态网页还是响应式设计中，CSS Grid 都是一种非常灵活的布局工具。

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

基于 CSS Grid 实现跨行跨列布局