# 隐式与显式网格

URL: https://caijiao.org/css/08-grid/03-grid-auto
Source: docs/css/08-grid/03-grid-auto.md
Description: CSS Grid 中显式网格通过定义行列模板创建，隐式网格在内容超出时自动生成，二者结合实现灵活布局。

CSS Grid 布局中，网格分为显式网格和隐式网格：

## 1. 显式网格

显式网格由开发者通过 `grid-template-rows` 和 `grid-template-columns` 明确定义行列数和尺寸。

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

显式网格只包含已定义的行和列。

## 2. 隐式网格

当项目超出显式定义的网格范围时，浏览器自动创建的额外行或列，称为隐式网格。

隐式行高度和隐式列宽度由 `grid-auto-rows` 和 `grid-auto-columns` 控制。

```css
grid-auto-rows: 100px;
grid-auto-columns: 150px;
```

## 3. 自动放置

未明确指定位置的项目，按照自动放置规则填充显式或隐式网格。

## 隐式与显式网格示例

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