WinddSnow

CSS-Grid-Layout-Part1-Container-Properties

CSS 容器属性 Grid 网格布局 fr单位
字数统计: 2.8k阅读时长: 11 min
2026/07/29

第28课：Grid 网格布局（上）——容器属性：grid-template-columns/rows、fr 单位、gap、隐式网格

CSS Grid 是二维布局的终极解决方案。Flexbox 擅长处理一维排列（要么行、要么列），而 Grid 允许你同时控制行和列，在二维平面上精确地放置元素。它是构建页面整体框架、复杂卡片网格、仪表板布局的首选工具。本节课将从零开始，深入讲解 Grid 容器上的核心属性：如何定义网格轨道、fr 单位的弹性分配、gap 间距控制、以及隐式网格的自动生成机制。

1. 开启 Grid 布局：display: grid 与 display: inline-grid

将一个元素设置为 Grid 容器，所有直接子元素自动成为 Grid 项目。

1
2
3
.container {
  display: grid;
}
值 容器自身行为 子元素行为 典型场景
display: grid 容器为块级元素，独占一行。 子元素成为 Grid 项目。 页面主体布局。
display: inline-grid 容器为行内块元素，可与其他元素同行。 子元素同上。 内嵌的小型网格（少见）。

一旦设置 display: grid，子元素的 float、display: inline-block、vertical-align 等属性将完全失效。

2. 定义网格轨道：grid-template-columns 与 grid-template-rows

网格轨道（Grid Track） 是网格中任意两条相邻网格线之间的空间——即列或行。

2.1 基本语法：固定轨道

1
2
3
4
5
6
7
.grid {
  display: grid;
  grid-template-columns: 200px 300px 150px;
  /* 三列：宽度分别为 200px、300px、150px */
  grid-template-rows: 100px 200px;
  /* 两行：高度分别为 100px、200px */
}

此网格共有 3 列 × 2 行。网格项目将依次填充这些单元格：第 1 个项目在左上角，第 2 个在右邻列，依次排列。若项目数超过 6 个，多余的会生成隐式行（见第 5 节）。

2.2 fr 单位：弹性比例的剩余空间

fr（fraction）是 Grid 布局的精髓——它表示网格容器中可用空间的一个份数。它与 Flexbox 的 flex-grow 类似，但作用于整个轨道。

1
2
3
4
5
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* 第一列占 1 份，第二列占 2 份，第三列占 1 份 */
}

fr 与固定尺寸的混合：

1
2
3
4
.grid {
  grid-template-columns: 200px 1fr 2fr;
  /* 第一列固定 200px，剩余空间按 1:2 分给第二、三列 */
}

fr 的计算逻辑：

  1. 先减去所有固定轨道（如 px、%）和 gap 的总尺寸。
  2. 剩余空间按 fr 数值比例分配。

示例：容器宽度 1000px，列定义 200px 1fr 2fr，gap: 20px（两个列间距，共 40px）。剩余空间 = 1000 - 200 - 40 = 760px。

  • 第二列：760 × 1 / 3 ≈ 253.33px
  • 第三列：760 × 2 / 3 ≈ 506.67px

2.3 repeat() 函数：批量定义轨道

当需要定义多个等宽列时，repeat() 可避免重复书写。

1
2
3
4
5
6
7
8
9
.grid {
  grid-template-columns: repeat(4, 1fr);
  /* 等价于 1fr 1fr 1fr 1fr */
}

.grid {
  grid-template-columns: repeat(3, 200px 1fr);
  /* 等价于 200px 1fr 200px 1fr 200px 1fr（3 次重复模式） */
}

2.4 auto 关键字：内容自适应

auto 让轨道的尺寸根据其内部内容自动调整。

1
2
3
4
.grid {
  grid-template-columns: auto 1fr;
  /* 第一列宽度 = 内容最宽的单元格宽度，第二列占据剩余空间 */
}

**对比 1fr 与 auto**：

  • auto：尺寸 = 内容所需的最小宽度。内容短则列窄，内容长则列宽。
  • 1fr：尺寸 = 剩余空间的比例份额，与内容宽度无关。

2.5 minmax() 函数：尺寸区间约束

minmax(min, max) 定义一个闭区间，轨道的实际尺寸将落在 [min, max] 之间。

1
2
3
4
.grid {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  /* 每列最小 200px，空间富余时膨胀为 1fr */
}

典型场景：minmax(200px, 1fr) 确保列宽不小于 200px（防止内容过度压缩），但可以更大。

3. 间距控制：gap、row-gap、column-gap

Grid 布局中，gap（原 grid-gap，现标准已统一为 gap）设置轨道之间的间距。它仅作用于轨道之间，不会在网格容器边缘添加额外空间。

1
2
3
4
5
6
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
  /* 行间距 20px，列间距 30px */
}
属性 旧名称 作用 简写语法
row-gap grid-row-gap 行与行之间的间距。 gap: <row-gap>
column-gap grid-column-gap 列与列之间的间距。 gap: <row-gap> <column-gap>

注意：gap 也适用于 Flexbox。现代开发中应统一使用 gap，废弃带 grid- 前缀的旧属性。

4. 网格线命名：[line-name]

可以为网格线显式命名，方便后续使用 grid-column / grid-row 定位项目。

1
2
3
4
.grid {
  grid-template-columns: [col-start] 1fr [col-mid] 2fr [col-end];
  grid-template-rows: [row-start] 100px [row-mid] 200px [row-end];
}
  • col-start 和 col-end 分别命名了第一列前和最后一列后的网格线。
  • 一条线可以有多个名字，空格分隔：[col-start sidebar-start]。

5. 隐式网格：grid-auto-rows 与 grid-auto-columns

当 Grid 项目的数量超出显式定义的网格轨道时，浏览器会自动创建新的行或列，这些自动生成的轨道称为隐式网格（Implicit Grid）。隐式轨道的尺寸由 grid-auto-rows 和 grid-auto-columns 控制。

1
2
3
4
5
6
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  /* 所有自动生成的行高度均为 150px */
}

没有设置 grid-auto-rows 时，隐式行的高度默认为 auto——即由内容高度决定。

1
2
3
4
5
<div class="grid">
  <div>1</div> <div>2</div> <div>3</div>
  <div>4</div> <div>5</div> <div>6</div>
  <div>7</div> <!-- 第三行，隐式网格，高度由内容决定或由 grid-auto-rows 控制 -->
</div>

5.1 grid-auto-flow：控制自动放置方向

默认情况下，Grid 项目按先行后列的顺序自动填充（逐行填满再换行）。grid-auto-flow 可改变这一行为。

值 行为
row 默认值。逐行填充，填满一行后换到下一行。
column 逐列填充。
row dense 逐行填充，并使用“稠密”算法：若前面有空隙，后项可填补。
column dense 逐列填充，同样尝试填补空隙。 
1
2
3
4
.grid {
  grid-auto-flow: column;
  /* 项目将按列排列：1, 4, 7 在第一列，2, 5 在第二列，3, 6 在第三列 */
}

注意：dense 模式可能打乱项目的视觉顺序，影响可访问性（键盘导航和屏幕阅读器仍按 DOM 顺序）。使用时应谨慎。

6. 综合示例：响应式卡片网格（无需媒体查询）

使用 auto-fit 和 minmax() 可构建完全响应式的网格，项目自动换行并伸缩，无需任何媒体查询。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    padding: 24px;
  }
  .card {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
</style>

<div class="card-grid">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
  <div class="card">卡片 4</div>
  <div class="card">卡片 5</div>
</div>

auto-fit 与 auto-fill 的区别：

  • auto-fit：若容器空间有剩余，已存在的列会拉伸填满，空轨道塌陷为 0。
  • auto-fill：即使内容不足以填满一行，也会保留空轨道（可导致右侧留白）。
关键字 行为
auto-fit 列数不变，存在列拉伸。适合卡片网格。
auto-fill 尽可能多生成列，即使列是空的。适合需要精确轨道数量的场景。

课后练习

一、概念自测（选择题 / 填空题）

  1. （单选） grid-template-columns: 1fr 2fr 1fr 的意思是？
    A. 三列等宽。
    B. 第一列 100px，第二列 200px，第三列 100px。
    C. 剩余空间按 1:2:1 的比例分配。
    D. 三列宽度分别为容器宽度的 25%、50%、25%。

  2. （单选） 以下关于 auto-fit 和 auto-fill 的说法，正确的是？
    A. auto-fill 会在空间富余时拉伸已存在列。
    B. auto-fit 会保留空轨道导致右侧留白。
    C. auto-fit 使已存在列拉伸填满，空轨道塌陷。
    D. 两者完全等价，仅名称不同。

  3. （填空） 要设置 Grid 容器中行与行的间距为 16px，列与列的间距为 24px，应使用 ______。

  4. （多选） 以下哪些 CSS 值可以用于 grid-template-columns 定义轨道尺寸？
    A. 200px
    B. 1fr
    C. minmax(150px, 1fr)
    D. auto

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要实现一个仪表板布局。要求如下：

  • 整体使用 Grid 布局，四行三列。
  • 第一行：顶部导航栏，占满所有列（span 3），高度 60px。
  • 第二行：左侧边栏（固定 240px），右侧内容区（2fr），中间无间隔。
  • 第三行：三个统计卡片，等分剩余空间。
  • 第四行：页脚，占满所有列，高度 50px。
  • 使用网格线命名或区域命名完成。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML + CSS 代码。提示词中需明确指定 Grid 容器属性、轨道定义、区域命名方式。

三、Agent 模式下的提示词示例

你是一个资深前端开发 Agent。请使用 CSS Grid 构建一个仪表板页面布局。需要创建以下文件：

  1. index.html：包含仪表板的 HTML 结构：<header>、<aside>、<main>、三个 <section class="stat">、<footer>。
  2. styles/dashboard.css：定义 .dashboard 为 Grid 容器。使用 grid-template-areas 命名区域："header header header"、"sidebar main main"、"stat1 stat2 stat3"、"footer footer footer"。列宽 240px 1fr 1fr，行高 60px 1fr auto 50px，min-height: 100vh，gap: 16px。各子元素通过 grid-area 对应区域名。
  3. styles/global.css：引入盒模型重置、基础字体和颜色。
  4. 确保代码整洁、注释清晰。在 index.html 中正确引入 CSS 文件。

课后练习答案

一、概念自测答案

  1. C

    • 解析：fr 是弹性比例单位，按剩余空间比例分配。不是绝对像素值，也不是容器宽度的固定百分比。

  2. C

    • 解析：auto-fit 会拉伸已存在列，空轨道塌陷。auto-fill 则保留空轨道。

  3. gap: 16px 24px

    • 解析：gap 简写中第一个值是行间距，第二个值是列间距。

  4. A、B、C、D

    • 解析：px 固定值、fr 弹性单位、minmax() 函数、auto 关键字均可用于定义轨道尺寸。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请使用 CSS Grid 生成一个仪表板页面布局。要求：

  • 容器 .dashboard 使用 display: grid，grid-template-areas 定义四个区域：'header header header'、'sidebar main main'、'stat1 stat2 stat3'、'footer footer footer'。
  • 列宽 240px 1fr 1fr，行高 60px 1fr auto 50px，min-height: 100vh，gap: 16px。
  • 六个子元素：.header、.sidebar、.main、.stat1、.stat2、.stat3、.footer，分别用 grid-area 对应区域名。
  • 各区域添加简单的背景色和文字以便辨识。
  • 代码简洁，注释说明区域命名与网格定义。直接输出完整 HTML 文件。”

三、Agent 模式下的提示词示例

（见上文 Agent 提示词部分）

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/28/CSS-Grid/

发表日期：July 28th 2026, 10:00:00 pm

更新日期：July 28th 2026, 10:27:15 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 第28课：Grid 网格布局（上）——容器属性：grid-template-columns/rows、fr 单位、gap、隐式网格
    1. 1.1. 1. 开启 Grid 布局：display: grid 与 display: inline-grid
    2. 1.2. 2. 定义网格轨道：grid-template-columns 与 grid-template-rows
      1. 1.2.1. 2.1 基本语法：固定轨道
      2. 1.2.2. 2.2 fr 单位：弹性比例的剩余空间
      3. 1.2.3. 2.3 repeat() 函数：批量定义轨道
      4. 1.2.4. 2.4 auto 关键字：内容自适应
      5. 1.2.5. 2.5 minmax() 函数：尺寸区间约束
    3. 1.3. 3. 间距控制：gap、row-gap、column-gap
    4. 1.4. 4. 网格线命名：[line-name]
    5. 1.5. 5. 隐式网格：grid-auto-rows 与 grid-auto-columns
      1. 1.5.1. 5.1 grid-auto-flow：控制自动放置方向
    6. 1.6. 6. 综合示例：响应式卡片网格（无需媒体查询）
    7. 1.7. 课后练习
      1. 1.7.1. 一、概念自测（选择题 / 填空题）
      2. 1.7.2. 二、AI 编程任务：编写面向 AI 的提示词
      3. 1.7.3. 三、Agent 模式下的提示词示例
    8. 1.8. 课后练习答案
      1. 1.8.1. 一、概念自测答案
      2. 1.8.2. 二、AI 编程任务参考答案（提示词示例）
      3. 1.8.3. 三、Agent 模式下的提示词示例
Total : 188
2026
2025
2024
2023
2022
2021
2020
2019
2018
1970
年终总结 碎语 HTML 可访问性 ARIA 键盘导航 屏幕阅读器 Angular 组件 模板语法 数据绑定 指令 管道 表单 模板驱动表单 响应式表单 验证器 Angular Material 主题定制 CDK 响应式布局 项目结构 NgModule 模块化 路由 导航守卫 惰性加载 Router RxJS Observable Subject 操作符 async管道 服务 依赖注入 @Injectable providedIn 注入器层级 React Ant Design ProTable ProForm 企业级组件 设计语言 ConfigProvider 国际化 Babel 编译 预设 polyfill browserslist CSS Bootstrap 导航栏 卡片 模态框 栅格系统 响应式 组件库 定制化 Sass 主题 animation keyframes 性能优化 will-change background border border-radius box-shadow outline 盒模型 box-sizing margin padding 自定义属性 var() 暗色模式 主题切换 display 布局 Flexbox 弹性布局 项目属性 flex-grow 容器属性 主轴与交叉轴 float clear BFC 字体 文本样式 font-face line-height Grid 网格布局 项目定位 grid-area fr单位 定位 position z-index fixed sticky 层叠上下文 选择器 属性选择器 伪类 权重 伪元素 Specificity important transform transition 动画 贝塞尔曲线 响应式设计 媒体查询 移动优先 容器查询 全栈实战 学习路线 项目架构 Vue ESLint Prettier 代码规范 Husky lint-staged Java ELK 分布式搜索引擎 elasticsearch Logstash kibana Element Plus Vue 3 表格 弹窗 消息提示 上传 按需引入 项目初始化 目录结构 Angular CLI TypeScript Vite AI辅助开发 Prompt工程 前端术语 缺陷描述 代码生成 代码修复 CommonJS ESM require import 测试 Jest 单元测试 组件测试 E2E Git Hooks commitlint 提交规范 conventional commits 最佳实践 Web标准 W3C WHATWG 代码验证 DOCTYPE 文档结构 标准模式 input label select textarea fieldset 表单验证 语义化 区块标签 SEO 原理 Head 元数据 Open Graph 图像 多媒体 srcset 响应式图片 多线程 超链接 导航 rel属性 JVM 42 基础 集合 并发 面试题 JavaScript 数组 Array方法 遍历 类数组 控制流 条件语句 循环 switch 数据类型 string number boolean 类型转换 Date Intl 时区 Temporal undefined symbol bigint object 错误处理 try-catch 调试 Source Map 事件循环 异步 宏任务 微任务 函数 箭头函数 参数 默认值 迭代器 生成器 Symbol.iterator yield JSON localStorage sessionStorage 数据存储 Map Set WeakMap WeakSet 原型链 prototype 继承 class ES Modules export 运算符 表达式 优先级 结合性 对象 属性描述符 Object方法 Proxy Reflect 元编程 作用域 闭包 词法环境 内存管理 严格模式 use strict 模块 字符串 模板字符串 正则表达式 RegExp 变量 var let const 提升 暂时性死区 数组基础 数据结构 WEB 数据库 MySql Mybatis Spring SpringBoot SpringCloud SpringMVC Dubbo Zookeeper MongoDB JWT token Kafka 列表 Markdown 掘金 Material UI MUI 主题系统 sx prop MySQL OpenClaw 微信 ClawBot 安装部署 聊天机器人 虚拟化 Proxmox VE yarn pnpm workspace 幽灵依赖 硬链接 npm 依赖管理 lock文件 workspaces Pinia 状态管理 Store State Getters Actions Context Provider useContext 性能 RabbitMQ 消息队列 自定义Hook 逻辑复用 useLocalStorage useDebounce JSX createElement 虚拟 DOM Fiber 事件处理 合成事件 this绑定 事件传参 插件 持久化 函数组件 Props children 组合 memo useMemo useCallback Code Splitting React.lazy Suspense 虚拟列表 React Router BrowserRouter Routes 嵌套路由 Outlet useNavigate 路由守卫 useState 批处理 不可变性 useEffect 副作用 生命周期 闭包陷阱 useReducer Reducer useRef forwardRef useImperativeHandle DOM操作 Redis 缓存 Redux Toolkit createSlice useSelector createAsyncThunk RTK Query Ribbon debug调试 spring springcloud 微服务 Tailwind CSS 组件化 样式复用 实用优先 配置 深色模式 文本标签 分享 类型系统 原始类型 any unknown never 工具类型 Partial Required Readonly Pick Omit Record Exclude Extract NonNullable Parameters ReturnType 访问修饰符 抽象类 implements 声明文件 ts types 全局声明 tsconfig 编译选项 环境配置 重载 this 函数类型 泛型 泛型函数 泛型接口 泛型约束 条件类型 infer 映射类型 组件类型 defineComponent PropType interface type 索引签名 声明合并 联合类型 交叉类型 类型收窄 字面量类型 构建工具 HMR esbuild 环境变量 代理配置 构建优化 代码分割 组件通信 defineProps defineEmits v-model 插槽 作用域插槽 动态组件 provide/inject Composition API setup computed watch watchEffect vim 编辑器之神 模板引用 onMounted nextTick v-once v-memo 异步组件 响应式原理 reactive ref 选项式 API 组合式 API mixins 迁移 Vue Router 4 动态路由 路由元信息 懒加载 过渡动画 类型安全 Webpack Loader Plugin css-loader babel-loader HtmlWebpackPlugin 打包工具 模块打包 SplitChunksPlugin 前端 Yapi 接口管理 Zustand 中间件 helloworld 保罗·格雷厄姆（Paul Graham） iframe 安全性 跨域通信 嵌入内容 数据库操作 nginx http服务器 高并发 计算机的世界
生活 前端基础 前端框架 前端工程化 课程总结 个人生活 编程中间件 前端工程化实践 编程 面试 工具用法 技术教程 计算机基础架构 读后感 指引 编程与数据库