如何正确地使用 CSS Grid 网格布局-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 网格布局是一种强大的前端布局技术，它可以让我们更加灵活、高效地布局网页。本文将介绍如何正确地使用 CSS Grid 网格布局，包括基本概念、语法、属性和实例演示。

基本概念

CSS Grid 网格布局是一种二维布局系统，它可以将网页分成行和列，然后将元素放置在这些行和列上。我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列，如下所示：

.container {
  display: grid;
  grid-template-rows: 100px 200px 300px; /* 定义 3 行 */
  grid-template-columns: 1fr 2fr; /* 定义 2 列 */
}

这段代码定义了一个 .container 容器，它有 3 行和 2 列。第一行的高度为 100 像素，第二行的高度为 200 像素，第三行的高度为 300 像素。第一列的宽度为容器宽度的 1/3，第二列的宽度为容器宽度的 2/3。

语法

CSS Grid 网格布局的语法有两种：显式网格和隐式网格。显式网格是我们手动定义的网格，而隐式网格则是自动生成的网格。

显式网格

显式网格的语法如下所示：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: 100px 200px 300px;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

这段代码定义了一个 .container 容器，它有 3 行和 2 列。我们使用 grid-template-areas 属性来定义网格的区域，每个区域用双引号包裹，区域之间用空格分隔。然后我们可以使用 grid-area 属性来将元素放置在对应的区域中。

隐式网格

隐式网格的语法如下所示：

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: 100px 200px 300px;
  grid-template-columns: 1fr 2fr;
}

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

这段代码定义了一个 .container 容器，它有 3 行和 2 列。我们没有使用 grid-template-areas 属性来定义网格的区域，而是使用 grid-row 和 grid-column 属性来将元素放置在对应的行和列上。

属性

CSS Grid 网格布局有很多属性，下面是一些常用的属性：

display

display 属性用于定义容器的显示方式，它的值必须为 grid。

grid-template-rows 和 grid-template-columns

grid-template-rows 和 grid-template-columns 属性用于定义网格的行和列，它们的值可以为长度、百分比、fr 等。

grid-template-areas

grid-template-areas 属性用于定义网格的区域，它的值为一个字符串，每个区域用双引号包裹，区域之间用空格分隔。

grid-gap

grid-gap 属性用于定义网格的间隔，它的值可以为长度、百分比、em 等。

grid-row 和 grid-column

grid-row 和 grid-column 属性用于将元素放置在网格的行和列上，它们的值可以为行号、列号、span、/ 等。

grid-area

grid-area 属性用于将元素放置在网格的区域中，它的值为一个字符串，表示区域的名称。

实例演示

下面是一个简单的实例演示，它展示了如何使用 CSS Grid 网格布局来布局一个网页。

<div class="container">
  <header class="header"></header>
  <aside class="sidebar"></aside>
  <main class="main"></main>
  <footer class="footer"></footer>
</div>

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-gap: 20px;
}

.header {
  grid-area: header;
  background-color: #f1c40f;
}

.sidebar {
  grid-area: sidebar;
  background-color: #3498db;
}

.main {
  grid-area: main;
  background-color: #2ecc71;
}

.footer {
  grid-area: footer;
  background-color: #e74c3c;
}

这段代码定义了一个包含头部、侧边栏、主内容和底部的网页布局。头部和底部高度为 100 像素，侧边栏宽度为 200 像素，主内容和侧边栏高度自适应。我们使用 grid-template-areas 属性来定义网格的区域，然后使用 grid-area 属性将元素放置在对应的区域中。最后，我们使用 background-color 属性为每个元素设置背景颜色，以便更好地展示布局效果。

总结

CSS Grid 网格布局是一种强大的前端布局技术，它可以让我们更加灵活、高效地布局网页。本文介绍了如何正确地使用 CSS Grid 网格布局，包括基本概念、语法、属性和实例演示。希望本文能够对你学习和使用 CSS Grid 网格布局有所帮助。

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