引入CSS网格布局-css教程-PHP中文网

首页

web前端

css教程

引入CSS网格布局

Christopher Nolan

Feb 21, 2025 am 09:35 AM

CSS Grid 布局：构建强大且灵活的网站布局

核心要点

CSS Grid 布局提供了一种更强大、更灵活的方式来创建复杂的网站布局，无需使用诸如 inline 和 float 之类的属性或单独的网格系统样式表。
目前，只有 IE 10 和 Edge 支持 CSS Grid 布局，但可以通过 Chrome 和 Firefox 中的特定标志或使用 polyfill 来启用它。
CSS Grid 布局使用称为 “fr” 的度量单位、线条、轨道、单元格和区域来定义网页上元素的布局。
CSS Grid 布局允许完全分离标记和布局，使 CSS 更易于维护，并为设计提供了无限的可能性。

Introducing the CSS Grid Layout

图片来自 SitePoint/Natalia Balska。

在创建复杂的网站时，网格至关重要。现代网页设计中网格的重要性从众多实现网格系统以加快开发速度的框架数量中可见一斑。

随着 CSS Grid 布局规范的引入，您无需再包含单独的样式表即可使用网格系统。另一个优点是，您无需再依赖 inline 和 float 等属性来布置网页上的元素。在本教程中，我们将介绍网格系统的基础知识，并创建一个基本的博客布局。

浏览器支持

目前，只有 IE 10 和 Edge 支持 Grid 布局——您还不能在商业网站上使用它。

它可以通过 chrome://flags 中的 “实验性 Web 平台功能” 标志在 Chrome 中启用。您可以使用 layout.css.grid.enabled 标志在 Firefox 中启用它。

另一种选择是使用 polyfill。确实存在 CSS Grid Polyfill！使用上述各种选项，您可以在 Grid 布局仍处于起步阶段时开始试验并尽可能多地了解它。

注意：Internet Explorer 目前已实现旧版本的规范。不幸的是，这意味着它与最新规范并不完全兼容。在学习本教程中的示例时，建议您使用启用了相应标志的 Chrome 或 Firefox。

网格系统术语

在布置元素方面，CSS 网格系统类似于表格。但是，它更加强大和灵活。在本节中，我将讨论一些在使用网格时需要注意的术语：

fr 单位：此单位用于指定可用空间的一部分。它旨在与 grid-rows 和 grid-columns 一起使用。根据规范——

分配分数空间发生在所有“长度”或基于内容的行和列大小达到其最大值之后。

线条：线条定义其他元素的边界。它们垂直和水平运行。在下图中，有四条垂直线和四条水平线。

轨道：轨道是平行线之间的空间。在下图中，有三条垂直轨道和三条水平轨道。

单元格：单元格是网格的基本构建块。在下图中，共有九个单元格。

区域：区域是一个矩形形状，具有任意数量的单元格。因此，轨道是一个区域，单元格 也是一个区域。

Introducing the CSS Grid Layout

在网格中定位元素

让我们从基础开始。在本节中，我将教您如何使用网格将元素定位到特定位置。要使用 CSS Grid 布局，您需要一个父元素和一个或多个子元素。为了演示，我们将使用以下标记作为我们的网格系统：

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

完成标记后，您需要在父元素上应用 display: grid 或 display: inline-grid 以及其他样式，如下所示：

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

grid-template-columns 和 grid-template-rows 属性用于指定各种行和列的宽度。在上面的示例中，我定义了五列。10px 列充当槽，用于在元素之间提供所需的间距。第一列宽度为 200px。第三列占据剩余空间的 0.3 部分。类似地，第五列占据剩余空间的 0.7 部分。

对于 grid-template-rows 中的第一行使用 auto 允许该行根据其内部的内容进行扩展。20px 行充当槽。

此时，元素紧密地排列在一起，如下面的演示所示。(此处省略CodePen演示链接)

观察到元素 B 位于我们计划用作槽的第二列中。如果您没有指定网格内子元素的位置，浏览器会将一个元素放在每个单元格中，直到第一行完全填充，其余元素然后进入下一行。这就是我们在第二行剩下四个备用列的原因。

要将元素移动到网格中的特定单元格，您需要在 CSS 中指定它们的位置。在解释如何使用网格系统移动元素之前，请查看下图。(此处省略图片链接)

在本例中，我们将使用“基于线条的放置”。基于线条的放置意味着我们的网格系统中的线条将充当放置和限制元素的指南。让我们以元素 B 为例。在水平方向上，它从第 3 列线开始，到第 4 列线结束。在垂直轴上，它位于第 1 行线和第 2 行线之间。

我们使用 grid-column-start 来指定元素的起始垂直线。在这种情况下，它将设置为 3。grid-column-end 指示元素的结束垂直线。在这种情况下，此属性将等于 4。相应的行值也将类似地设置。

考虑到以上所有内容，要将元素 B 移动到第二个单元格，您将使用以下 CSS：

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

类似地，要将元素 F 移动到第六个单元格，您将使用以下 CSS：

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

在对 CSS 进行这些更改后，元素应该像此演示中一样正确地间隔开。(此处省略CodePen演示链接)

创建基本布局

现在是时候创建一个基本的博客布局了。该博客将具有页眉、页脚、侧边栏和两个用于实际内容的部分。让我们从标记开始：

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

请记住，标记中元素的顺序不会影响元素在网页上的位置。只要您不更改 CSS，您就可以在标记中将页脚放在页眉上方，而网页上元素的位置不会改变。当然，我不建议这样做。关键是——您的标记将不再决定元素的位置。

我们现在要做的就是确定各种元素的 grid-row-end 等属性的值。就像在最后一个示例中一样，我们将使用网格图来确定所有网格属性的值。(此处省略图片链接)

如上图所示，页眉从第 1 列线到第 4 列线，从第 1 行线到第 2 行线。这应该如下所示：

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

类似地，“额外内容”从第 3 列线到第 4 列线，从第 5 行线到第 6 行线。因此，CSS 将是：

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

现在也可以轻松确定所有其他元素的网格属性。查看 CodePen 演示并试验各种网格值，以更好地了解基于线条的放置。(此处省略CodePen演示链接)

结论

CSS 网格布局规范使我们能够轻松创建复杂的布局。我们需要编写的 CSS 更简单、更易于维护。在设计中创建复杂布局时，我们不再需要使用 float 或其他此类属性。另一个巨大的优势是标记和布局的完全分离。使用 CSS Grid 布局，可能性是无限的。

如果您对本教程有任何疑问，请在评论中告诉我。

关于 CSS Grid 布局的常见问题

CSS Grid 布局与其他 CSS 布局方法有何不同？

CSS Grid 布局是一个二维布局系统，与其他 CSS 布局方法（如 Flexbox，它是一维的）不同。这意味着使用 CSS Grid，您可以同时控制水平和垂直布局，而其他方法则无法做到这一点。它旨在处理更复杂的设计和大型布局。它也更灵活、更强大，允许更具创意和精细的设计。

如何开始使用 CSS Grid 布局？

要开始使用 CSS Grid 布局，您需要将元素的 display 属性设置为 grid 或 inline-grid。这使得元素成为网格容器，其子元素成为网格项目。然后，您可以使用各种网格属性来定义网格的布局和网格项目的位置。

我可以将 CSS Grid 布局与其他 CSS 布局方法一起使用吗？

是的，CSS Grid 布局可以与其他 CSS 布局方法结合使用。例如，您可以将 Flexbox 用于网站的组件，将 CSS Grid 用于整体布局。这使您可以利用每种布局方法的优势。

如何使用 CSS Grid 布局创建网格？

要使用 CSS Grid 布局创建网格，您首先需要通过将元素的 display 属性设置为 grid 或 inline-grid 来定义网格容器。然后，您可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格中列和行的数量和大小。