CSS 网格布局学习笔记

什么是网格布局？

CSS 网格布局是一种二维的布局系统，它能够在一个网格容器中创建各种大小的网格行和网格列，并将网格中元素的位置固定到这些网格中。该布局系统可以通过设置网格线的位置、大小等属性来实现。

如何使用网格布局？

要使用 CSS 网格布局，首先需要将某个元素的 display 属性设置为 grid 或 inline-grid，将其定义为一个网格容器。然后，可以使用 grid-template-rows、grid-template-columns 和 grid-template-areas 属性来定义网格的行和列。接下来，就可以将元素放入网格容器中，设置它们的网格行和网格列，以及其他相关属性。

实例

下面是一个简单的例子，展示了如何使用 CSS 网格布局创建一个包含两列和三行的网格，并将其中的元素放置到网格中。

htmlCopy Code
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

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

.item {
  background-color: #ccc;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

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

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

.item3 {
  grid-row: 2 / 4;
  grid-column: 2 / 3;
}

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

.item5 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.item6 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
</style>

在上面的例子中，我们首先将容器设置为一个网格容器，定义了三行两列的网格，并设置了网格之间的间距为 10 像素。然后，我们为每个元素分配了它们在网格中所占的行和列，并给出了一些其他的样式属性，例如背景颜色、内边距等。

总结

CSS 网格布局是一种强大的布局系统，它可以帮助我们更轻松地创建复杂的布局。它提供了许多属性和功能，使得我们能够更加灵活地控制网格的行、列和单元格，从而实现我们所期望的布局效果。