FORMA

网格布局

Grid（CSS Grid Layout，网格布局）是 CSS 的二维布局模型：同时在行与列两个方向上划分空间、对齐子项。适合整页骨架、卡片矩阵、仪表盘等需要「行 + 列」一起控制的场景。

若只需沿单一方向排列（导航栏、按钮组、单行均分），应优先使用 Flexbox 弹性盒子。二者常组合：外层 Grid 划区块，区块内 Flex 排组件。

交互式属性速查：Grid 可视化指南。

核心概念

术语说明
Grid 容器设置 display: grid 或 display: inline-grid 的元素
Grid 项目容器的直接子元素；更深层后代不会自动成为 grid item
网格线（grid line）划分网格的线，编号从 1 开始；可用负数从末端计数（-1 为最右侧/最下侧线）
轨道（track）两条相邻网格线之间的行或列
单元格（cell）行与列交叉形成的单格
网格区域（area）一个或多个矩形单元格组成的命名区域
显式网格 / 隐式网格由 grid-template-* 定义的是显式网格；放不下的项目会进入隐式网格，尺寸由 grid-auto-rows / grid-auto-columns 控制

容器属性（定义网格结构）

display

  • grid：块级网格容器。
  • inline-grid：行内级网格容器，参与行内排版。
  • subgrid：在子 grid 容器上，将 grid-template-rows 或 grid-template-columns 设为 subgrid，使子网格轨道与父网格对应轨道对齐（跨层卡片、表单对齐列）。子项须跨越父网格中相应轨道；详见 现代 CSS · Subgrid。

grid-template-columns / grid-template-rows

定义显式列、行轨道的尺寸。常用取值：

  • 长度：200px、10rem 等固定轨道。
  • fr（fraction）：在扣除固定尺寸轨道后，按份数分配剩余空间。1fr 2fr 表示第二列分得的第一列的两倍剩余空间（不是「绝对宽度比 1:2」）。
  • repeat(n, track-list)：重复轨道，如 repeat(3, 1fr)、repeat(auto-fill, minmax(200px, 1fr))。
  • minmax(min, max)：限制轨道最小/最大尺寸，如 minmax(100px, auto)。
  • auto-fill / auto-fit：在响应式网格中自动重复列/行；auto-fit 会折叠空轨道，auto-fill 保留空轨道占位（细节见 MDN）。
css
grid-template-columns: 100px 1fr 1fr;
grid-template-rows: repeat(4, minmax(50px, auto));

简写 grid-template 可同时写行、列与区域（语法较繁，日常更常分开写 columns / rows / areas）。

gap

  • row-gap、column-gap 或简写 gap: <row> <column>：轨道之间的间距（gutter），从可用空间中扣除，不参与 fr 分配。
  • 旧名 grid-gap 等仍被部分浏览器识别，新代码请用 gap。

grid-template-areas

用字符串「画图」命名区域：每一引号字符串是一行，每个名字对应一个单元格；同一名字连续出现表示跨列/跨行。空单元格用 . 占位。区域必须是矩形，不能出现 L 形缺口。

css
grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";

子项通过 grid-area: header 等方式放入对应命名区域（名称须与模板一致）。

对齐与自动放置（容器级）

  • justify-items / align-items：单元格内部内容在行轴 / 列轴的对齐（默认 stretch）。
  • justify-content / align-content：当网格总尺寸小于容器时，整个网格在容器内的对齐与间距分布。
  • place-items、place-content：上述属性的简写。
  • grid-auto-flow：未显式放置的项目如何自动填入网格（row 默认按行、column 按列、dense 尝试填补空洞）。

项目属性（控制位置与跨度）

grid-column / grid-row

分别是 grid-column-start / grid-column-end 与 grid-row-start / grid-row-end 的简写。用网格线编号定位（线号，不是格序号）：

css
/* 从第 1 条列线到第 3 条列线 → 跨越 2 列 */
grid-column: 1 / 3;
/* 从第 1 条列线起，跨 2 列 */
grid-column: 1 / span 2;

grid-area

  • 若容器定义了 grid-template-areas：可用区域名，如 grid-area: sidebar。
  • 也可作为四值简写：grid-row-start / grid-column-start / grid-row-end / grid-column-end。

justify-self / align-self

单个项目覆盖容器的 justify-items / align-items。

示例：页面骨架（Header / Sidebar / Main / Footer）

下面示例实现常见的四区页面结构（并非传统意义上三栏等高的「圣杯布局」Holy Grail，后者常指左中右三列与页脚的特殊组合）。要点：fr 占满剩余空间，grid-template-areas 绑定区域名。

html
<!DOCTYPE html>
<html lang="zh">
    <head>
        <style>
            * {
                box-sizing: border-box;
            }
            body {
                margin: 0;
            }
            .container {
                display: grid;
                height: 100vh;
                grid-template-rows: 60px 1fr 60px;
                grid-template-columns: 200px 1fr;
                grid-template-areas:
                    "header header"
                    "sidebar content"
                    "footer footer";
            }
            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                font-family: sans-serif;
            }
            .header {
                grid-area: header;
                background-color: #e74c3c;
            }
            .sidebar {
                grid-area: sidebar;
                background-color: #3498db;
            }
            .content {
                grid-area: content;
                background-color: #2ecc71;
            }
            .footer {
                grid-area: footer;
                background-color: #9b59b6;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item header">Header</div>
            <div class="item sidebar">Sidebar</div>
            <div class="item content">Content</div>
            <div class="item footer">Footer</div>
        </div>
    </body>
</html>

主内容区内部仍可用 Flex 做工具栏、按钮组等一维排版。

Flexbox vs Grid

特性FlexboxGrid
维度一维（主轴 + 交叉轴）二维（行与列同时定义）
典型场景组件内对齐、均分、换行列表页面骨架、表单矩阵、响应式卡片墙
空间分配沿主轴伸缩（flex-grow 等）轨道尺寸（fr、minmax、固定长）
放置方式顺序流 + order 微调网格线、跨度、grid-template-areas 命名
关系常「内容驱动」主轴空间常「先画网格，再放子项」

二者没有绝对优劣：同一页面中 Grid 管大布局、Flex 管局部，是常见做法。

常见注意点

  • 只给 grid-template-columns 不设行时，行高由内容与 grid-auto-rows 决定；需要占满视口高度时要显式写 grid-template-rows（如示例中的 1fr）。
  • fr 只在有剩余空间时按比例分配；全是 fr 且无固定轨道时，等分容器内容盒（已减去 gap）。
  • 使用 grid-template-areas 时，子项 grid-area 名称必须与模板中的名字一致；留空位置用 .，不能拼出非矩形区域。

总结

  • 需要同时控制行和列 → 用 Grid；只沿一个方向 → 用 Flex。
  • 先掌握：grid-template-columns/rows、gap、fr / minmax、grid-column / grid-row、grid-template-areas。
  • 响应式卡片优先了解 repeat(auto-fill|auto-fit, minmax(...))。
  • 与 Flexbox 组合：Grid 划区，Flex 排区内一行元素。

参考文献

以下链接在编写时均可正常访问，供延伸阅读与查阅规范细节：

资料说明
MDN：网格布局中文概念、示例与属性索引
MDN：displaygrid / inline-grid 等显示类型
MDN：grid-template-columns列轨道、fr、repeat、minmax
MDN：grid-template-areas命名区域与语法约束
W3C：CSS Grid Layout Module Level 2官方规范（英文）
A Complete Guide to Grid（CSS-Tricks）英文图文完整指南
Grid by ExampleRachel Andrew 的示例与教程集合
Grid 可视化指南（malven.co）交互式属性速查

相关文章

Series

css

8 / 20

字体单位排版与文本