# Grid 基础

URL: https://caijiao.org/css/08-grid/01-grid-basics
Source: docs/css/08-grid/01-grid-basics.md
Description: CSS Grid 是二维布局系统，使用行和列定义区域，实现复杂且灵活的网页布局。

CSS Grid 布局是一种强大的二维布局系统，可以同时控制行和列，轻松创建复杂的网格结构。

## 1. 定义网格容器

通过设置容器的 `display: grid;` 或 `inline-grid;` 来启用网格布局。

```css
display: grid;
```

## 2. 网格轨道（行和列）

使用 `grid-template-columns` 和 `grid-template-rows` 定义列宽和行高。

```css
grid-template-columns: 100px 200px 100px;
grid-template-rows: 50px 150px;
```

也可以使用 `fr` 单位，表示可用空间的分数份额。

```css
grid-template-columns: 1fr 2fr 1fr;
```

## 3. 网格间距

- `grid-column-gap` / `column-gap`：列间距
- `grid-row-gap` / `row-gap`：行间距
- `gap`：同时设置行列间距

```css
gap: 10px 20px;
```

## 4. 网格项目定位

通过给子元素设置 `grid-column` 和 `grid-row` 来控制其跨越的行列。

## Grid 基础示例

[在线代码演示](/css/demos/19.html)