HTML & CSS 网格布局教程

在这个教程中，我们将学习如何使用 HTML 和 CSS 创建响应式的网格布局。网格布局是现代网页设计中非常流行的布局方式，它允许我们创建灵活、可伸缩的页面布局。

网格布局基础

网格布局由多个网格线组成，这些网格线将页面划分为多个区域。每个区域都可以独立地设置宽度和高度，使得布局更加灵活。

创建网格容器

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

.container {
  display: grid;
}

定义网格线

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

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1 个单位宽度，2 个单位宽度 */
  grid-template-rows: 1fr; /* 1 个单位高度 */
}

放置网格项

在设置了网格容器和网格线之后，我们可以将网格项放置到网格中。这可以通过使用 grid-column 和 grid-row 属性来实现。

.item1 {
  grid-column: 1; /* 第一列 */
  grid-row: 1; /* 第一行 */
}

实践示例

下面是一个简单的网格布局示例：

<div class="container">
  <div class="item1">内容 1</div>
  <div class="item2">内容 2</div>
  <div class="item3">内容 3</div>
  <div class="item4">内容 4</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1 个单位宽度，2 个单位宽度 */
  grid-template-rows: 1fr; /* 1 个单位高度 */
}

.item1 {
  grid-column: 1; /* 第一列 */
  grid-row: 1; /* 第一行 */
}

.item2 {
  grid-column: 2; /* 第二列 */
  grid-row: 1; /* 第一行 */
}

.item3 {
  grid-column: 1; /* 第一列 */
  grid-row: 2; /* 第二行 */
}

.item4 {
  grid-column: 2; /* 第二列 */
  grid-row: 2; /* 第二行 */
}

网格布局示例

扩展阅读

如果你想要更深入地了解网格布局，可以阅读以下教程：

• MDN Web Docs - CSS Grid Layout

希望这个教程能帮助你更好地理解 HTML 和 CSS 网格布局。祝你学习愉快！