CSS Grid 布局指南

CSS Grid 布局是现代网页设计中一种强大的布局方式，它允许开发者以二维方式对网页元素进行布局。下面将为您介绍 CSS Grid 布局的基本概念和使用方法。

基本概念

CSS Grid 布局由两部分组成：网格容器（Grid Container）和网格项目（Grid Item）。

网格容器：指的是使用 display: grid; 或 display: inline-grid; 属性定义的元素。
网格项目：指的是网格容器内的所有直接子元素。

使用方法

创建网格容器

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

.container {
  display: grid;
}

定义网格线

在网格容器中，可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格线的数量和大小。

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

放置网格项目

网格项目可以通过 grid-column 和 grid-row 属性来指定其在网格中的位置。

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

实例

下面是一个简单的示例，展示了如何使用 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: 100px 100px;
  grid-template-rows: 100px 100px;
}

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

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

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

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

扩展阅读

如果您想了解更多关于 CSS Grid 布局的细节，可以阅读以下文章：

MDN Web Docs - CSS Grid Layout

希望这份指南能帮助您更好地理解和使用 CSS Grid 布局！