CSS Grid 指南

CSS Grid 是一种二维布局系统，它允许开发者将页面元素排列成行和列的形式。这个指南将帮助你了解 CSS Grid 的基本概念和用法。

CSS Grid 基础

布局容器

首先，你需要定义一个网格容器。这可以通过在容器的 display 属性上设置 grid 或 inline-grid 实现。

.container {
  display: grid;
}

定义行和列

在网格容器内部，你可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 三列，每列宽度为 100px */
  grid-template-rows: 100px 100px 100px; /* 三行，每行高度为 100px */
}

网格项目

网格项目指的是网格容器内的子元素。你可以使用 grid-column 和 grid-row 属性来指定子元素的位置。

.item1 {
  grid-column: 1 / 3; /* 从第 1 列开始，到第 3 列结束 */
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 2;
}

实例

现在，让我们通过一个实例来理解 CSS Grid 的用法。

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

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

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

.item2 {
  grid-column: 2;
  grid-row: 2;
}

.item3 {
  grid-column: 1;
  grid-row: 2;
}

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

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

.item6 {
  grid-column: 1;
  grid-row: 3;
}

通过以上实例，我们可以看到如何使用 CSS Grid 来布局页面元素。

CSS Grid 指南

CSS Grid 基础

布局容器

定义行和列

网格项目

实例

更多资源