# [#](#f46ffd)[CSS 的网格布局](https://xplanc.org/primers/document/zh/03.HTML/02.%E6%A0%B7%E5%BC%8F/09.%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80.md#f46ffd)

CSS 网格布局（Grid Layout）是一个强大的 2D 布局系统，可精确地控制页面的行和列布局，比 Flex 更适合结构化排布。

通过将一个元素样式的 `display` 属性设为 `grid`，可以将该元素设为网格布局的 **容器**。

通过容器的 [`grid-template-columns`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.template.md) 属性可以配置网格的列宽度，通过 [`grid-template-rows`](https://xplanc.org/primers/document/zh/03.HTML/EX.HTML%20%E5%85%83%E7%B4%A0/EX.template.md) 属性可以配置网络的行高度。

下面这个示例将网格设为二行四列，两行的高度分别为 40px 和 80px，四列的宽度分别为 40px，80px，120px 和 160px。

```html


<div style="display:grid; grid-template-columns:40px 80px 120px 160px; grid-template-rows:40px 80px;">
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:orange;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:purple;"></div>
    <div style="background-color:cyan;"></div>
    <div style="background-color:pink;"></div>
</div>

```
    

## [#](#47c6db)[单位 fr](https://xplanc.org/primers/document/zh/03.HTML/02.%E6%A0%B7%E5%BC%8F/09.%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80.md#47c6db)

可以使用特殊的单位 `fr` 按比例分配列的宽度（或行的高度）。

下面这个示例将网格设为二行四列，两行的高度分均 40px，四列的宽度为 。

```html


<div style="display:grid; grid-template-columns:1fr 2fr 2fr 1fr;grid-template-rows:40px 40px;">
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:orange;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:purple;"></div>
    <div style="background-color:cyan;"></div>
    <div style="background-color:pink;"></div>
</div>

```
    

## [#](#25e2b6)[repeat](https://xplanc.org/primers/document/zh/03.HTML/02.%E6%A0%B7%E5%BC%8F/09.%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80.md#25e2b6)

可以使用 `repeat` 函数简化代码。

```css
repeat(重复次数, 被重复的值)

```

下面这个示例将网格设为二行四列，两行的高度分均 40px，四列的宽度为 。

```html


<div style="display:grid; grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(2, 40px);">
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:orange;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:purple;"></div>
    <div style="background-color:cyan;"></div>
    <div style="background-color:pink;"></div>
</div>

```

## [#](#b27bf1)[minmax](https://xplanc.org/primers/document/zh/03.HTML/02.%E6%A0%B7%E5%BC%8F/09.%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80.md#b27bf1)

可以使用 `minmax` 函数设置单元格宽度的最小值和最大值，通常与 `repeat` 搭配，适用于响应式设计。

```css
repeat(重复次数, minmax(最小宽度, 最大宽度))

```

重复次数通常使用 `auto-fill` 和 `auto-fit`：

* `auto-fill` 满足宽度的前提下，单元格数量尽可能多
* `auto-fit` 满足宽度的前提下，填满行

下面的示例中，容器的宽度在不断变化。网格将自动适应容器的宽度，列宽最小不小于 `100px`。

可以看到 `auto-fit` 模式下，当容器宽度不小于 `500px` 时，由于只包含了 4 个单元，因此最多只被划分为 4 列；单元格的宽度被拉伸。

而 `auto-fill` 模式下，当容器宽度不小于 `500px` 时，尽管只包含了 4 个单元，网格仍被划分为了更多列；单元格仅占据相应的列。

```html


<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));grid-template-rows:repeat(auto-fit, 40px);">
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:orange;"></div>
</div>



<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));grid-template-rows:repeat(auto-fit, 40px);">
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:orange;"></div>
</div>

```


> 上例中，单元格的最小宽度是 100px，最大宽度是无限。当网格容器的宽度为 500px 时， 若 ，则单元格宽度小于 100px 不满足宽度要求。因此  。
> 
> * `auto-fill` 倾向于单元格更多，因此列数为 5，单元格宽度为 100px，四个元素占前四列。
> * `auto-fit` 倾向填满行，由于子元素数量只有四个，因此列数为4，单元格宽度为 125px。

---

> 《[CSS 的网格布局](https://xplanc.online/2baabc72c8b0dc2c143397929c7e968b014ac7ae92a04d6113407c3c51aeeca8)》 是转载文章，[点击查看原文](https://xplanc.org/primers/document/zh/03.HTML/02.%E6%A0%B7%E5%BC%8F/09.%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80.md)。

CSS 网格布局（Grid Layout）是一个强大的 2D 布局系统，可精确地控制页面的行和列布局，比 Flex 更适合结构化排布。

CSS 的网格布局

前端

CSS网格布局是强大的2D布局系统，通过grid-template-columns/rows控制行列尺寸，支持fr单位、repeat函数和minmax响应式设计，实现精准页面排版。

响应式设计

容器

11.11畅享AI算力 云启新增长

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

CSS 的网格布局-腾讯云开发者社区-腾讯云

CSS 的网格布局

CSS 的网格布局

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐