使用 CSS Grid-layout 创建栅格布局的技巧分享-JavaScript中文网-JavaScript教程资源分享门户

有很多 CSS 布局技术，但是 CSS Grid-layout 是其中最强大的一种。它可以帮助我们快速地创建复杂的栅格布局，而且还可以在移动设备和桌面设备之间自适应。在这篇文章中，我将向大家详细介绍如何使用 CSS Grid-layout 创建栅格布局，希望对前端开发人员有帮助。

什么是 CSS Grid-layout

首先，让我们来了解一下 CSS Grid-layout 究竟是什么。它是一个二维的布局系统，可以根据我们的需要创建网格，并将内容放置在网格中。可以通过以下方式使用 CSS Grid-layout：

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

在上面的代码中，我们创建了一个 class 为 .container 的容器，将它的 display 属性设置为 grid，并在 grid-template-rows 和 grid-template-columns 中定义了网格的行和列。这样，我们就可以使用 CSS Grid-layout 创建栅格布局了。

使用 CSS Grid-layout 创建栅格布局的技巧

接下来，让我们来分享一些使用 CSS Grid-layout 创建栅格布局的技巧。

容器与项目

在使用 CSS Grid-layout 时，我们需要理解容器和项目的概念。容器是我们定义的网格区域，而项目则是我们要在容器中放置的内容。在创建栅格布局时，我们先要创建容器，再在容器内部添加项目。

grid-template-rows 和 grid-template-columns

使用 grid-template-rows 和 grid-template-columns 可以定义我们的栅格布局。它们接收值的方式不同，grid-template-rows 接收的是一组值，表示每行的高度，例如：

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

而 grid-template-columns 接收的是多个值，每个值表示一列的宽度，例如：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

grid-area

我们可以使用 grid-area 属性定义项目在栅格布局中的位置。例如：

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

其中 grid-area 的值依次表示项目的 row-start、column-start、row-end 和 column-end。上面的代码表示，将 class 为 .item 的项目放置在第一行第二列到第二行第三列之间。

grid-gap

使用 grid-gap 属性可以为栅格布局中的项目之间添加间距。例如：

.container {
  grid-gap: 10px;
}

上面的代码将会在项目之间添加间距为 10px 的间距。

响应式设计

CSS Grid-layout 还支持响应式设计。我们可以使用媒体查询来定义不同分辨率下的栅格布局。例如：

@media (max-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

上面的代码表示，在窗口的宽度小于 768px 时，我们将全局容器 .container 的栅格布局修改为一列。

示例代码

最后，我们来看一下如何使用 CSS Grid-layout 创建一个带有响应式设计的栅格布局。

HTML：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-gap: 10px;
}

.item {
  background-color: #333;
}

.item1 {
  grid-area: 1 / 1 / 3 / 2;
}

.item2 {
  grid-area: 1 / 2 / 2 / 4;
}

.item3 {
  grid-area: 2 / 2 / 3 / 3;
}

.item4 {
  grid-area: 2 / 3 / 3 / 4;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 200px);
  }

  .item1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .item2 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .item3 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .item4 {
    grid-area: 4 / 1 / 5 / 2;
  }
}

上述代码创建了一个根据屏幕宽度支持响应式设计的栅格布局。在窗口宽度大于 768px 时，容器将被分成 3 列，每列高度为 200px，并添加了 10px 的间距。在窗口宽度小于 768px 时，容器将被分成一列，每项高度为 200px，同样设置了 10px 的间距。

总结

CSS Grid-layout 是一种灵活且强大的布局技术，可以用于创建复杂的栅格布局、支持响应式设计。在本文中，我们介绍了使用 CSS Grid-layout 创建栅格布局的技巧，如创建容器与项目、定义栅格布局、使用 grid-area、添加间距、和响应式设计等。希望这篇文章对您有所帮助。

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