CSS 网格容器学习笔记

CSS 网格布局提供了一种二维网格系统，可以用于构建复杂的网页布局，它更加直观和灵活。其中，网格容器是指具有显示和定位属性，可以成为网格项目的父级元素。

创建网格容器

要创建一个网格容器，我们需要在父级元素上设置 display 属性为 grid 或 inline-grid，这将使元素成为一个网格容器。例如：

cssCopy Code
.container {
  display: grid;
}

定义网格行和列

接下来，我们需要定义网格容器中的行和列。我们可以使用 grid-template-rows 和 grid-template-columns 属性来定义它们。

cssCopy Code
.container {
  display: grid;
  grid-template-rows: 100px 200px 300px; /* 定义三个行，分别高度为 100px、200px、300px */
  grid-template-columns: 1fr 2fr 1fr; /* 定义三个列，比例关系为 1:2:1 */
}

设置网格间距和边框

我们可以使用 grid-row-gap、grid-column-gap 和 grid-gap 属性来设置网格项目之间的间距和网格容器的边框。例如：

cssCopy Code
.container {
  display: grid;
  grid-template-rows: 100px 200px 300px;
  grid-template-columns: 1fr 2fr 1fr;
  grid-row-gap: 20px; /* 设置行之间的间距为 20px */
  grid-column-gap: 10px; /* 设置列之间的间距为 10px */
  grid-gap: 30px; /* 等同于同时设置行、列之间的间距 */
  border: 1px solid #ccc; /* 设置边框 */
}

添加网格项目

最后，我们可以将子元素添加到网格容器中作为网格项目。我们可以使用 grid-row、grid-column 和 grid-area 属性来定义它们在网格中的位置。

htmlCopy Code
<div class="container">
  <div class="item" style="grid-row: 1 / 3; grid-column: 1 / 3;">A</div>
  <div class="item" style="grid-row: 2 / 4; grid-column: 3 / 4;">B</div>
  <div class="item" style="grid-area: 3 / 1 / 4 / 2;">C</div>
  <div class="item" style="grid-area: 3 / 2 / 4 / 4;">D</div>
</div>

上面的代码中，我们创建了四个网格项目，它们的位置分别是：

• A：占据第 1 行到第 2 行、第 1 列到第 2 列
• B：占据第 2 行到第 3 行、第 3 列到第 4 列
• C：占据第 3 行、第 1 列到第 2 列
• D：占据第 3 行、第 2 列到第 4 列

以上是 CSS 网格容器的基本使用方法和实例，希望对你有所帮助！