如何使用 CSS 网格布局实现分栏布局？-JavaScript中文网-JavaScript教程资源分享门户

CSS 网格布局是 CSS3 中引入的一种基于网格线的布局系统，可以快速实现分栏布局，实现了多列、多行的灵活排列。当然，对于前端工程师来说，CSS 网格布局的实现并不一定是易如反掌，但只要掌握了一些基础知识，就能大大简化开发。

基本概念

在了解网格布局之前，需要先介绍一下网格布局中的一些基本概念：

网格容器（Grid Container）：定义一个容器，里面的子元素可以以网格形式排布。
网格线（Grid Line）：网格线是网格容器的分隔线，可以是水平线和垂直线。
网格轨道（Grid Track）：相邻网格线之间的空间被称为网格轨道，可以是水平轨道或垂直轨道。
网格单元格（Grid Cell）：网格轨道构成的交叉点所组成的单元格，可以是一个或多个。
网格区域（Grid Area）：网格容器内的任何矩形空间都可以称为一个网格区域。

实现分栏布局

基于上述基本概念，我们可以很方便地实现分栏布局。

基本布局结构

我们先来定义一个网格容器，将页面分为两个分栏：

<div class="grid-container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

在上面的代码中，我们使用 display: grid 声明了该元素为网格容器，使用 grid-template-columns 定义了网格容器的两栏，grid-gap 定义了栏之间的距离。

网格区域的定义

现在，我们要将第一栏分为两个区域，一个占据 2 行 1 列，一个占据 1 行 1 列：

// javascriptcn.com 代码示例
.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item-2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

在上述代码中，我们使用了 grid-row 和 grid-column 来定义网格区域的行和列。其中，grid-row: 1 / 3 表示该项占据了第一行和第二行，grid-column: 1 / 2 表示该项占据了第一列。

完整代码示例

完整的代码示例如下：

<div class="grid-container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
</div>

// javascriptcn.com 代码示例
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.item-2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

在实现以上代码之后，我们就成功地实现了一个分栏布局。

总结

CSS 网格布局是一种非常强大的布局方式，可以帮助我们快速实现各种布局需求。本文介绍了基本概念和具体实现方式，并给出了代码示例，希望能帮助读者更好地理解和掌握 CSS 网格布局。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b64167d4982a6ebd520c1