CSS Grid 及其实战应用技巧-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是前端界最新的 HTML 和 CSS Layout 模块之一。现在，作为Web开发者，你必须熟练掌握它。本文将深入介绍 CSS Grid 并介绍实战应用技巧，通过这些技巧，你将掌握如何为自己的项目构建响应式布局。

什么是 CSS Grid?

CSS Grid 是一种二维布局系统，它允许我们在两个方向上构建复杂的网格布局。在很多情况下，我们能够仅使用 CSS Grid 就能实现整个网页的布局，而无需依赖于其他工具、框架或库。

CSS Grid 由网格容器（grid container）和网格项（grid item）两部分组成。网格容器是一个元素，它把某一区域分成网格，使其中的内容能够在这些网格中排列。网格项则是容器中的子元素，我们可以在不规则或规则的网格中对其进行定位。

例子

我们可以通过简单的 HTML 和 CSS 代码来展示如何使用 CSS Grid 进行布局：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
        display: grid; /*display 属性必须声明为 grid*/
        grid-template-columns: repeat(3, 1fr);/*创建一个三列的网格*/
    }
    .hero {
        grid-column: 1/4;
        background-color: #0072C6;
        color: #fff;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .feature {
        background-color: #fff;
        color: #000;
        height: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="hero">
      <h1>CSS Grid</h1>
    </div>
    <div class="feature">
      <h3>Feature 1</h3>
    </div>
    <div class="feature">
      <h3>Feature 2</h3>
    </div>
    <div class="feature">
      <h3>Feature 3</h3>
    </div>
  </div>
</body>
</html>

在这个例子中，我们首先通过 display: grid 把 .grid-container 元素设置为一个网格容器。接着我们使用 grid-template-columns 属性来声明这个网格中有三列，每一列的宽度都为 1fr。接下来，我们将 .hero 网格项跨越了这个网格中的三列，这就占据了所有可用的空间。剩下的 .feature 网格项都占据一个网格，每一个项等宽等高，周围没有间隔。

这里的 grid-column: 1/4 是新颖的 CSS Grid 实例之一。grid-column 属性接收一个内联视觉格式化模型（IVFM），可实现跨度效果。在这种情况下，我们指定 grid-column: 1/4，并从左边的网格线开始跨越三个网格，到右边的第四个网格线。一旦我们指定了这个网格项的跨度，我们就可以把宽度和高度指定为直接的 CSS 属性，并且与之前所使用的不同，无需依赖于其他非标准的技巧。

实战应用

下面，我们将通过实际示例来演示如何使用 CSS Grid。我们将创建一个完整的网页布局，它能够有效地响应移动设备和桌面端设备的尺寸。

设计

我们将创建一个基于固定宽度和高度的网页布局，使用网格系统来实现。通过设置基于 viewport 的上下文，网页布局将在不同的屏幕尺寸下自适应。我们可以通过媒体查询的方式来控制不同屏幕尺寸下的 CSS Grid 的宽度和高度。

HTML

以下是我们用来构建这个布局的 HTML 结构。

// javascriptcn.com 代码示例
<header>
  <!-- Header content -->
</header>
<main>
  <section>
    <!-- Section content -->
  </section>
  <section>
    <!-- Section content -->
  </section>
  <aside>
    <!-- Aside content -->
  </aside>
</main>
<footer>
  <!-- Footer content -->
</footer>

CSS

为了创建一个有效的 CSS Grid 系统，我们需要在网格容器上定义网格栏和网格行。我们还需要定义每个网格项对应的网格行和网格列以及排列方法等。

// javascriptcn.com 代码示例
/* 网页布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: auto auto auto auto auto;
  grid-gap: 10px;
  grid-template-areas:
    "header header header header header header header header header  header header header header header header header header header header header header header header header"
    "main   main   main   main   main   main   main   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side  "
    "main   main   main   main   main   main   main   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side  "
    "main   main   main   main   main   main   main   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side   side  "
    "footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer";
    /*grid-template-areas 可以比较好的理解 CSS 布局的流程*/
}
/* 网格项样式*/
header {
  grid-area: header;
}
main {
  grid-area: main;
}
section {
  grid-area: main; /* 将网格项映射至与主区（main）相对应的网格*/
}
aside {
  grid-area: side; /* 将网格项映射至与边栏区（side）相对应的网格*/
}
footer {
  grid-area: footer;
}

在这个示例中，我们设置了一个基于行和列的网格。我们以 repeat(24, 1fr) 的方式样式化网格。这会为我们创建一个具有 24 列、1/24 的可用宽度的默认值的网格。我们还定义了 5 行，其中 auto 和 1fr 将针对每行为我们动态设置高度。 grid-gap 属性允许我们定义栏和行之间的空隙大小。这样我们就能够为网格项定义布局位置。

grid-template-areas 属性允许我们将类似于“表格单元格”的区域映射到网格的位置上。我们用字符串定义每个网格单元格的区域名，并按顺序列出它们，这样就可以组成一个完整的网格布局。在这个示例中，我们要创建一个充满整个屏幕的布局。grid-template-areas 中使用的名称与我们为每个元素在 HTML 中定义的区域相同。这让我们将上一个示例定义的 header、main、aside 和 footer 与其对应的区域相匹配，并在我们的网页布局中实现我们的设计。

在我们的示例中，我们使用简洁的 grid-area 属性来为网格容器中的每个网格项定义区域。在这个例子中，我们已经设置了一个布局，它实现了一个横向和纵向的三栏布局。我们可以将 section 引用到 main 区域中来实现双栏布局并指定它们的方向方式。

总结

CSS Grid 提供了一种强大的二维方案，用于构建网页布局系统。它创造了简单，灵活，高效的布局方式。在实践应用中，当你需要构建复杂的布局并且希望使你的工作更加简单时，CSS Grid 非常有用。本文介绍了如何搭建一个自适应响应式接口布局。这些技巧可以用来创建网站模板、应用商店和信息门户，并且适用于所有屏幕大小和设备。

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