HTML 网格

在 HTML 中，网格是一种可以创建在网页上的二维（2-D）布局。它用于为页面提供结构，并系统地排列页面内容以更好地理解。

它用于水平、垂直或同时放置内容。网格中的项目可以放置在任何位置。网格由单元格组成，其中每个正方形或矩形都是一个单元格。它可能由行（水平线）和列（垂直线）组成。

让我们了解一些与网格相关的术语。

• 行：网格布局中水平的线称为行。
• 列：网格布局中垂直的线称为列。
• 单元格：单个行轨道和单个列轨道的交点称为单元格。
• 槽：使用“padding”CSS 属性创建的列和行之间的间隙称为槽。
• 列线：列之间的线称为列线。
• 行线：行之间的线称为行线。
• 网格线：上面定义的行线和列线统称为网格线。

下面是一个包含3 行 3 列网格的图表。上面讨论的所有术语都在图中标记出来，以便更好地理解。

让我们借助演示来正确理解 HTML 网格。

演示 1

在这个演示中，让我们形成一个简单的五行 HTML 网格。

代码

输出

下面提供的结果中可以看到一个简单的 HTML 网格。

演示 2

我们将在这个演示中构建一个五列的网格。

代码

输出

下面提供的输出中可以看到一个简单的五列 HTML 网格。

演示 3

在这个演示中，我们将创建一个包含九个单元格的 HTML 网格，并使用 CSS 类对其进行样式设置。

代码

输出

我们显然可以在下面显示的输出中看到带有 9 个单元格的 HTML 网格。

演示 4

我们将在这个演示中显示一个 HTML 语义网格，该网格将包含一个标题、导航、内容、侧边栏和页脚。

代码

输出

我们可以在下面提供的结果中看到 HTML 语义网格。

演示 5

在这个演示中，让我们构建一个中间包含空白区域的 HTML 网格。

代码

输出

我们可以在下面给出的输出中看到中间有空白区域的 HTML 网格。

演示 6

让我们在这个演示中构建一个包含 18 个单元格的 HTML 网格，我们还将对网格应用样式以使其看起来更具吸引力。

代码

输出

我们可以在下面给出的输出中看到包含 18 个单元格的 HTML 网格。

结论

我们可以得出结论，HTML 网格是一个二维布局，我们可以构建它来在网页上正确排列内容。