WinddSnow

CSS-Grid-Layout-Part2-Item-Placement-and-Advanced

CSS Grid 网格布局 项目定位 grid-area
字数统计: 3.3k阅读时长: 14 min
2026/07/29

第29课：Grid 网格布局（下）——项目定位、网格区域命名、auto-fit vs auto-fill

上一节课我们学习了 Grid 容器属性，定义了网格的轨道结构与间距。本节课将聚焦于 Grid 项目自身的属性——如何将项目精确地放置在网格单元格中、跨越多个轨道、甚至完全脱离自动流放置。我们还会深入对比 auto-fit 和 auto-fill 的细微差异，并学习命名网格区域这一高级技巧。掌握这些能力后，你将能够构建任何你能想到的二维布局。

1. 基于网格线的项目定位：grid-column 与 grid-row

每条网格线都有一个数字索引，从 1 开始。列线从左到右编号，行线从上到下编号。也可以使用显式命名的网格线（见第 28 课）。

1.1 grid-column-start、grid-column-end 及其简写

这两个属性定义项目起始于哪条列线、结束于哪条列线。

1
2
3
4
.item {
  grid-column-start: 2; /* 从第 2 条列线开始 */
  grid-column-end: 4;   /* 到第 4 条列线结束（占据第 2、3 列） */
}

简写：grid-column: <start> / <end>

1
2
3
.item {
  grid-column: 2 / 4; /* 同上 */
}

1.2 grid-row-start、grid-row-end 及其简写

1
2
3
.item {
  grid-row: 1 / 3; /* 从第 1 条行线到第 3 条行线，占据第 1、2 行 */
}

1.3 span 关键字：跨越的轨道数

不必记住精确的线号，可以告诉浏览器“从当前位置跨越 N 个轨道”。

1
2
3
4
.item {
  grid-column: 2 / span 2; /* 从第 2 条列线开始，跨越 2 列 */
  grid-row: 1 / span 3;    /* 从第 1 条行线开始，跨越 3 行 */
}

span 也可以用在起始位置：

1
2
3
.item {
  grid-column: span 3 / -1; /* 跨越 3 列，结束于最后一条列线 */
}

1.4 负线号

可以使用 -1 表示最后一条线，-2 表示倒数第二条线，以此类推。

1
2
3
.item {
  grid-column: 1 / -1; /* 从第一条线到最后一条线，占满整行 */
}

1.5 网格线定位综合示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
  }
  .item1 { grid-column: 1 / 3; grid-row: 1 / 3; background: #e74c3c; }
  .item2 { grid-column: 3 / 5; grid-row: 1 / 2; background: #3498db; }
  .item3 { grid-column: 3 / 4; grid-row: 2 / 4; background: #2ecc71; }
  .item4 { grid-column: 4 / 5; grid-row: 2 / 3; background: #f39c12; }
  .item5 { grid-column: 1 / 5; grid-row: 3 / 4; background: #9b59b6; }
</style>

<div class="grid">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

此示例创建了一个杂志封面式的混合布局，项目尺寸各不相同，完全由网格线定位。

2. grid-area：语法糖与区域命名

grid-area 有两种完全不同的用途。

2.1 作为 grid-row + grid-column 的终极简写

语法：grid-area: <row-start> / <column-start> / <row-end> / <column-end>

1
2
3
4
5
6
7
8
9
.item {
  grid-area: 1 / 2 / 3 / 4;
  /* 等价于：
     grid-row-start: 1;
     grid-column-start: 2;
     grid-row-end: 3;
     grid-column-end: 4;
  */
}

顺序记忆：上、左、下、右（逆时针）。也可以用 span：

1
2
3
.item {
  grid-area: 1 / 2 / span 2 / span 3;
}

2.2 配合 grid-template-areas 进行语义化布局

这是 Grid 最强大的功能之一——用 ASCII 艺术般的语法直接描述布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main  main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main   { grid-area: main; }
.footer { grid-area: footer; }
1
2
3
4
5
6
<div class="page-layout">
  <header class="header">头部</header>
  <aside class="sidebar">侧边栏</aside>
  <main class="main">主要内容</main>
  <footer class="footer">页脚</footer>
</div>

规则：

  • 每个区域名必须形成一个矩形（不能是 L 形或分散的块）。
  • 可以用 . 表示空单元格。
  • 区域名相同的单元格自动合并为一个区域。

3. auto-fit 与 auto-fill 的深度对比

两者都用于 repeat() 函数中，与 minmax() 配合创建响应式网格。但它们在有剩余空间时表现不同。

3.1 auto-fill：保留空轨道

当容器宽度大于 minmax 最小值乘以可能的最大列数时，auto-fill 会创建尽可能多的空列轨道（即使没有足够的项目填充它们）。这些空轨道占据空间，可能导致右侧留白。

1
2
3
.grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

如果容器 1000px 宽，最多可以容纳 floor(1000 / 200) = 5 列。若只有 3 个项目，auto-fill 仍会生成 5 列轨道，后两列为空，占据 2 * 200px = 400px 空间。但这 400px 也会按 1fr 参与弹性分配，实际空列会扩展得比其他列更大。

3.2 auto-fit：折叠空轨道

auto-fit 同样会生成尽可能多的列轨道，但在放置完所有项目后，空的轨道会被折叠（宽度变为 0），并将释放的空间重新分配给有内容的列（因为它们也是 1fr）。

相同场景下（容器 1000px，3 个项目），auto-fit 最终只有 3 列可见，它们会拉伸填满容器，不会留下空白列。

3.3 直观对比

特性 auto-fill auto-fit
空轨道处理 保留空轨道，它们仍占据空间（并可伸缩）。 折叠空轨道，不保留空间。
视觉效果（项目少） 项目靠左，右侧有大片留白。 项目拉伸填满整行。
适用场景 需要精确的网格列数（如动态添加内容时保持列宽不变）。 卡片网格、仪表板，希望内容始终铺满。

3.4 实战建议

  • 卡片列表、商品展示：使用 auto-fit，让卡片铺满并自动换行。
  • 日历、仪表板小部件：可能更适合 auto-fill 以保持列宽一致，即使某些格子为空。

4. justify-items 与 align-items：网格项目在单元格内的对齐

这两个属性设置所有网格项目在其所在单元格内的水平与垂直对齐方式（类似于 Flexbox 的 justify-content 和 align-items，但作用在网格单元格上）。

属性 方向 默认值 常用值
justify-items 行内（水平） stretch start、end、center、stretch
align-items 块级（垂直） stretch start、end、center、stretch 
1
2
3
4
5
6
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center; /* 所有项目在各自单元格内水平居中 */
  align-items: center;   /* 垂直居中 */
}

stretch（默认值）让项目拉伸以填满单元格宽度/高度（若项目未设固定尺寸）。

4.1 单个项目的覆盖：justify-self 与 align-self

若只需调整某一个项目的对齐方式，可使用对应的 -self 属性。

1
2
3
4
.special-item {
  justify-self: end;  /* 水平靠右 */
  align-self: start;  /* 垂直靠上 */
}

5. justify-content 与 align-content：整个网格在容器内的对齐

当网格总尺寸小于容器尺寸时（如轨道总宽度 < 容器宽度），这些属性控制整个网格在容器内的分布位置。

属性 方向 默认值 常用值
justify-content 行内（水平） start start、end、center、stretch、space-between、space-around、space-evenly
align-content 块级（垂直） start 同上 
1
2
3
4
5
.grid {
  display: grid;
  grid-template-columns: 600px; /* 单列，宽度小于容器 */
  justify-content: center; /* 网格在容器内水平居中 */
}

与 Flexbox 的类比：

  • justify-content / align-content：控制整个网格在容器中的位置（与 Flex 的 justify-content 作用于主轴类似，但 Grid 有二维）。
  • justify-items / align-items：控制网格项目在单元格内的位置。

6. 综合示例：仪表板页面布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style>
  .dashboard {
    display: grid;
    grid-template-areas:
      "header header header"
      "sidebar main  main"
      "footer footer footer";
    grid-template-columns: 240px 1fr 1fr;
    grid-template-rows: 60px 1fr 50px;
    min-height: 100vh;
    gap: 16px;
    padding: 16px;
  }
  .header  { grid-area: header;  background: #1a1a2e; color: white; display: flex; align-items: center; padding: 0 24px; border-radius: 8px; }
  .sidebar { grid-area: sidebar; background: #f0f0f0; padding: 20px; border-radius: 8px; }
  .main    { grid-area: main;    background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
  .footer  { grid-area: footer;  background: #1a1a2e; color: #aaa; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
</style>

<div class="dashboard">
  <header class="header">📊 管理仪表板</header>
  <aside class="sidebar">导航菜单</aside>
  <main class="main">
    <h2>概览</h2>
    <div class="stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 20px;">
      <div style="background:#3498db; color:white; padding:16px; border-radius:8px;">销售额 ¥12,400</div>
      <div style="background:#2ecc71; color:white; padding:16px; border-radius:8px;">订单 356</div>
      <div style="background:#e74c3c; color:white; padding:16px; border-radius:8px;">待处理 23</div>
    </div>
  </main>
  <footer class="footer">© 2026 Dashboard Inc.</footer>
</div>

课后练习

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

  1. （单选） grid-area: 2 / 1 / 4 / 3 的含义是？
    A. 从第 2 行线、第 1 列线开始，到第 4 行线、第 3 列线结束。
    B. 从第 1 行线、第 2 列线开始，到第 3 行线、第 4 列线结束。
    C. 占据第 2～3 行和第 1～2 列。
    D. 从第 2 列线、第 1 行线开始，跨越 4 行 3 列。

  2. （单选） 以下关于 auto-fit 与 auto-fill 的描述，正确的是？
    A. auto-fit 会保留空轨道，auto-fill 会折叠空轨道。
    B. 两者完全相同，仅名称不同。
    C. auto-fit 折叠空轨道，auto-fill 保留空轨道。
    D. auto-fit 仅用于 grid-template-rows，auto-fill 仅用于 grid-template-columns。

  3. （填空） 要设置网格容器内所有项目在其单元格中水平居中和垂直靠底部，应使用 justify-items: ______ 和 align-items: ______。

  4. （多选） 以下哪些方式可以实现 Grid 项目的精确定位？
    A. grid-column: 1 / 3
    B. grid-area: 1 / 1 / 2 / 4
    C. grid-template-areas 配合 grid-area
    D. grid-auto-flow: column

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

场景：你需要实现一个杂志风格的文章列表布局（Masonry 风格不用 JS，用 Grid 近似实现）。要求如下：

  • 整体使用 Grid 布局，4 列。
  • 第一篇文章（特色文章）占 2 列 2 行。
  • 其余文章每篇占 1 列 1 行，但通过 span 或网格线控制形成参差不齐的视觉效果（如有意让第三篇文章占 2 列）。
  • 使用网格线定位，不使用 grid-template-areas。
  • 设置合适的 gap 和项目背景色以区分区块。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML + CSS 代码。提示词中需明确指定 Grid 项目定位属性、span 用法、以及整体网格定义。

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

你是一个资深前端开发 Agent。请使用 CSS Grid 构建一个杂志风格的文章布局组件。需要创建以下文件：

  1. index.html：包含一个网格容器 .magazine-grid，内含 7 篇示例文章（.article），每篇文章包含一张占位图片和标题。第一篇文章标记为 .article--featured。
  2. styles/magazine.css：定义 .magazine-grid 为 Grid 容器，grid-template-columns: repeat(4, 1fr)，gap: 16px，grid-auto-rows: 200px。.article--featured 使用 grid-column: span 2; grid-row: span 2;。其余文章按顺序放置，有意让第三篇文章使用 grid-column: span 2; 形成特殊效果。所有文章背景色 #f9f9f9，圆角，内边距。
  3. styles/global.css：引入盒模型重置、基础字体。
  4. 确保代码整洁、注释说明每一项定位的目的。在 index.html 中正确引入 CSS 文件。

课后练习答案

一、概念自测答案

  1. A

    • 解析：grid-area 顺序为 row-start / column-start / row-end / column-end。A 项描述完全正确。

  2. C

    • 解析：auto-fit 折叠空轨道，使存在列填满；auto-fill 保留空轨道，可能导致留白。

  3. center 和 end

    • 解析：justify-items: center 水平居中；align-items: end 垂直靠底。

  4. A、B、C

    • 解析：A 和 B 都是基于网格线的定位；C 是基于命名区域的定位。D 是自动流方向控制，不能精确定位单个项目。

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

示例提示词：
“请使用 CSS Grid 创建一个杂志风格的文章列表布局。要求：

  • 容器 .magazine-grid 设置 display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px;。
  • 第一篇文章 .article--featured 使用 grid-column: span 2; grid-row: span 2; 占 2 列 2 行。
  • 第三篇文章特殊处理，使用 grid-column: span 2; 占 2 列。
  • 其余文章默认占 1 列 1 行（无需额外声明）。
  • 每篇文章包含一张占位图（https://via.placeholder.com/400x200）和一个标题，背景色 #f9f9f9，圆角 8px，内边距 12px。
  • 至少提供 7 篇文章示例。直接输出完整 HTML 文件。”

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

（见上文 Agent 提示词部分）

原文作者：WinddSnow

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

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

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

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

CATALOG
  1. 1. 第29课：Grid 网格布局（下）——项目定位、网格区域命名、auto-fit vs auto-fill
    1. 1.1. 1. 基于网格线的项目定位：grid-column 与 grid-row
      1. 1.1.1. 1.1 grid-column-start、grid-column-end 及其简写
      2. 1.1.2. 1.2 grid-row-start、grid-row-end 及其简写
      3. 1.1.3. 1.3 span 关键字：跨越的轨道数
      4. 1.1.4. 1.4 负线号
      5. 1.1.5. 1.5 网格线定位综合示例
    2. 1.2. 2. grid-area：语法糖与区域命名
      1. 1.2.1. 2.1 作为 grid-row + grid-column 的终极简写
      2. 1.2.2. 2.2 配合 grid-template-areas 进行语义化布局
    3. 1.3. 3. auto-fit 与 auto-fill 的深度对比
      1. 1.3.1. 3.1 auto-fill：保留空轨道
      2. 1.3.2. 3.2 auto-fit：折叠空轨道
      3. 1.3.3. 3.3 直观对比
      4. 1.3.4. 3.4 实战建议
    4. 1.4. 4. justify-items 与 align-items：网格项目在单元格内的对齐
      1. 1.4.1. 4.1 单个项目的覆盖：justify-self 与 align-self
    5. 1.5. 5. justify-content 与 align-content：整个网格在容器内的对齐
    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服务器 高并发 计算机的世界
生活 前端基础 前端框架 前端工程化 课程总结 个人生活 编程中间件 前端工程化实践 编程 面试 工具用法 技术教程 计算机基础架构 读后感 指引 编程与数据库