CSS Grid 布局教程

CSS Grid 布局（CSS Grid）是 CSS 中用于创建复杂网页布局的一种方法。它允许开发者创建具有多个列和行的网格，然后将元素放置到网格的特定位置上。

基本概念

容器（Container）：使用 display: grid; 或 display: grid-template-columns;/grid-template-rows; 属性创建的元素。
项目（Item）：容器内的所有子元素都是项目。
网格线（Grid Line）：网格的行和列之间的线。
单元格（Cell）：网格线的四个交点之间的空间。

创建网格

要在容器中创建网格，可以使用以下属性：

grid-template-columns：定义列的大小和数量。
grid-template-rows：定义行的大小和数量。
grid-template：同时定义列和行。

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

放置项目

要将项目放置到网格中，可以使用以下属性：

grid-column：指定项目所在的列。
grid-row：指定项目所在的行。
grid-area：使用一个简写属性来指定项目的位置。

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

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

间距与对齐

grid-gap：设置网格的行和列之间的间距。
justify-content 和 align-items：设置项目在单元格内的对齐方式。

.container {
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
}

实例

下面是一个使用 CSS Grid 创建的简单布局示例：

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

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

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

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

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

更多关于 CSS Grid 的信息，请访问我们的 CSS Grid 教程。