CSS Grid 网格布局详解拓展版-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 网格布局是一种新的 CSS 布局方式，它可以让我们更加灵活地实现复杂的布局。相比于传统的布局方式，CSS Grid 可以让我们更加轻松地实现响应式布局，而且代码更加简洁易懂。本文将对 CSS Grid 布局进行详细的讲解，并且提供实例代码帮助读者更好地理解。

基础概念

在开始讲解 CSS Grid 布局之前，我们需要了解一些基础概念。

网格容器和网格项

网格容器是一个 HTML 元素，它的子元素被称为网格项。网格容器通过设置 display: grid 或者 display: inline-grid 来创建。网格项可以是任何 HTML 元素。

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

上面的代码中，.grid-container 是一个网格容器，它包含了四个网格项。.item 是网格项的类名。

行和列

网格布局中，行和列是非常重要的概念。行是网格中的水平区域，列是网格中的垂直区域。我们可以通过 grid-template-columns 和 grid-template-rows 来定义行和列的大小。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

上面的代码中，我们定义了两行两列的网格布局，每一行和每一列的大小都是 1fr。

网格线和网格轨道

网格线是网格中的水平或垂直线，网格轨道是相邻网格线之间的区域。我们可以通过 grid-template-columns 和 grid-template-rows 来定义网格线和网格轨道。

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

上面的代码中，我们定义了两列两行的网格布局，第一列的宽度是 100px，第二列的宽度是 200px，第一行的高度是 50px，第二行的高度是 100px。

网格区域

网格区域是网格中的一个矩形区域，它由四条网格线和它们之间的网格轨道组成。我们可以通过 grid-template-areas 来定义网格区域。

// javascriptcn.com 代码示例
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.item {
  grid-area: main;
}

上面的代码中，我们定义了一个三行三列的网格布局，其中第一行是 header 区域，第一列是 sidebar 区域，第二行第二列是 main 区域，第三行是 footer 区域。.item 元素被放置在了 main 区域。

实例演示

下面我们将通过一些实例来演示 CSS Grid 的使用。

实例一：基本网格布局

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

// javascriptcn.com 代码示例
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.item {
  background-color: #ccc;
  padding: 1rem;
}

上面的代码中，我们定义了一个两行两列的网格布局，每个网格项的背景颜色是灰色。我们可以通过修改 grid-template-columns 和 grid-template-rows 来改变网格的大小。

实例二：响应式网格布局

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

// javascriptcn.com 代码示例
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

.item {
  background-color: #ccc;
  padding: 1rem;
}

上面的代码中，我们定义了一个自适应的网格布局，每个网格项的最小宽度是 200px，最大宽度是 1fr。我们可以通过修改 minmax 函数来改变网格项的大小，从而实现响应式布局。

实例三：网格区域布局

<div class="grid-container">
  <div class="item header">Header</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item main">Main</div>
  <div class="item footer">Footer</div>
</div>

// javascriptcn.com 代码示例
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  height: 100vh;
}

.item {
  background-color: #ccc;
  padding: 1rem;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

上面的代码中，我们定义了一个网格区域布局，其中包含了一个 header 区域、一个 sidebar 区域、一个 main 区域和一个 footer 区域。我们可以通过修改 grid-template-areas 来改变网格区域的布局。

总结

CSS Grid 网格布局是一种非常强大的布局方式，它可以让我们更加灵活地实现复杂的布局。通过本文的学习，相信读者已经掌握了 CSS Grid 的基础概念和使用方法。在实际项目中，我们可以根据不同的需求来灵活运用 CSS Grid 布局，从而实现更加优秀的用户界面。

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