CSS Grid 教程

CSS Grid 是一种用于创建复杂网页布局的强大工具。它允许开发者通过定义网格容器和网格项来布局页面元素。下面是 CSS Grid 的基本概念和使用方法。

基本概念

CSS Grid 允许我们将网页布局划分为行和列，类似于表格布局，但更加灵活和强大。

网格容器

首先，我们需要定义一个网格容器。这可以通过在容器的 CSS 中添加 display: grid; 属性来实现。

.container {
  display: grid;
}

网格线

网格容器内的行和列被称为网格线。我们可以通过 grid-template-columns 和 grid-template-rows 属性来定义网格的行列数。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 两列，第二列是第一列的两倍宽 */
  grid-template-rows: 100px 200px; /* 两个行，第二行是第一行的两倍高 */
}

网格项

网格项是网格容器中的子元素。我们可以通过 grid-column 和 grid-row 属性来指定它们的位置。

.item1 {
  grid-column: 1 / 3; /* 从第一列开始，跨越两列 */
  grid-row: 1;
}

实例

以下是一个简单的示例，展示了如何使用 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>

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

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

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

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

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

更多关于 CSS Grid 的教程和示例，请访问我们的 CSS Grid 教程页面。