跳到主要内容

CSS 网格概念

CSS网格布局（CSS Grid Layout）是一种强大的布局系统，它允许开发者通过定义行和列来创建复杂的网页布局。与传统的布局方式（如浮动或Flexbox）相比，CSS网格提供了更直观和灵活的方式来控制网页的结构。

什么是CSS网格？​

CSS网格是一个二维布局系统，它允许你通过定义网格容器（Grid Container）和网格项（Grid Items）来创建复杂的布局。网格容器是应用了 display: grid 或 display: inline-grid 的元素，而网格项则是网格容器的直接子元素。

网格容器与网格项​

  • 网格容器：通过设置 display: grid 或 display: inline-grid，你可以将一个元素定义为网格容器。这个容器内的所有直接子元素都会自动成为网格项。
  • 网格项：网格项是网格容器的直接子元素。你可以通过设置网格项的属性来控制它们在网格中的位置和大小。

基本概念​

网格线（Grid Lines）​

网格线是网格布局中的分界线，它们定义了网格的行和列。网格线可以是水平的（行）或垂直的（列）。网格线从1开始编号，从左到右和从上到下递增。

css
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
}

在这个例子中，我们定义了一个3列2行的网格。网格线从1到4（列）和1到3（行）。

网格轨道（Grid Tracks）​

网格轨道是两条相邻网格线之间的空间。轨道可以是行轨道（水平）或列轨道（垂直）。你可以通过 grid-template-columns 和 grid-template-rows 属性来定义轨道的宽度和高度。

css
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 150px 150px;
}

在这个例子中，我们定义了3列和2行，列宽分别为100px、200px和100px，行高均为150px。

网格单元格（Grid Cell）​

网格单元格是网格布局中的最小单位，它是两条相邻行线和两条相邻列线之间的空间。每个网格单元格可以包含一个或多个网格项。

网格区域（Grid Area）​

网格区域是由四条网格线包围的空间，它可以包含一个或多个网格单元格。你可以通过 grid-area 属性来定义一个网格项占据的区域。

css
.item {
  grid-area: 1 / 1 / 3 / 3;
}

在这个例子中，网格项将占据从第1行第1列到第3行第3列的区域。

实际应用​

创建简单的网格布局​

让我们通过一个简单的例子来创建一个3列2行的网格布局。

css
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 150px 150px;
  gap: 10px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
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>

在这个例子中，我们创建了一个3列2行的网格布局，每个网格项都有相同的样式。gap 属性用于设置网格项之间的间距。

响应式网格布局​

CSS网格非常适合创建响应式布局。你可以使用 fr 单位（分数单位）来定义灵活的列宽和行高。

css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
}

在这个例子中，中间的列宽是两侧列宽的两倍，布局会根据容器的大小自动调整。

总结​

CSS网格布局是一种强大的工具，它允许你通过定义行和列来创建复杂的网页布局。通过掌握网格容器、网格项、网格线、网格轨道、网格单元格和网格区域等基本概念，你可以轻松地创建出灵活且响应式的布局。

附加资源​

练习​

  1. 创建一个4列3行的网格布局，列宽分别为 100px、200px、150px 和 100px，行高均为 100px。
  2. 使用 fr 单位创建一个响应式网格布局，使得中间的列宽是两侧列宽的两倍。
  3. 尝试使用 grid-area 属性将一个网格项跨越多个行和列。

通过练习，你将更好地理解CSS网格布局的强大功能。