CSS Grid布局：网格区域命名

可视化演示

展示CSS Grid的行列定义、区域命名与gap间距，通过交互控件切换不同网格模板，实时观察二维布局变化。

网格基础：先看懂户型图

拿到一套新房，设计师不会急着买家具，而是先在图纸上画横平竖直的参考线。CSS Grid 的第一步也是这样：在父元素上写 display: grid;，这个元素就变成了“网格容器”，它里面的直接子元素叫“网格项目”。网格容器里的横线和竖线叫“网格线”，两条相邻网格线之间的长条区域叫“轨道”，横轨和竖轨交叉出的最小格子叫“单元格”。

小区里每栋楼都有楼号，户型图上的参考线也同样重要。有了网格线和轨道，你才能准确说“把书架放在第 2 条竖线到第 3 条竖线之间”。Grid 和 Flexbox 最大的差别就在这里：Flex 只有一条“队伍”，而 Grid 同时管理横队和纵队。理解网格线，是后面所有定位的基础。

一个简单的网格容器需要定义列和行，否则所有项目会默认挤在一列里。无论横竖，线的数量都与轨道数有固定关系：

网格线只是骨架，真正让户型图实用的是“每面墙之间的距离”，这一步，就是下一节要学的行列定义。

行列定义：画出承重墙

参考线画好了，还得决定每面墙放在哪里、房间有多宽。CSS Grid 用 grid-template-columns 定义竖轨道的宽度，用 grid-template-rows 定义横轨道的高度。这就像在户型图上标注“客厅宽 4 米、卧室宽 3 米”，数值单位可以用像素、百分比，也可以用弹性单位 fr。

写 grid-template-columns: 100px 1fr 2fr; 时，第一列固定 100px，剩余空间先扣除列间距，再按 1 : 2 分给后两列。fr 是 Grid 特有的弹性单位，专门用于“按比例瓜分剩余空间”；repeat(3, 1fr) 则表示三间一样大的标准间，不用反复写同一个长度。这个分配逻辑可以写成：

墙画好了，接下来最关键的步骤，就是给这些房间贴上门牌号，让元素知道自己该住哪一间。

区域命名：给房间贴名牌

户型图上只有“格子”还不够，你还需要告诉别人“这里是厨房，那里是书房”。CSS Grid 的 grid-template-areas 就是用来画这张“字符地图”的：一行字符串代表网格的一行，每个名字代表一个单元格。比如：

写完地图后，子元素只要写 grid-area: main;，就会自动落到名为 main 的区域里。区域名必须组成一个完整矩形，用英文句号 . 表示“这个位置不放东西”。这种命名方式让布局像户型图一样一目了然，也方便后续在响应式设计中整体换图纸。一个命名区域在数学上可以看作一组连续的单元格：

给房间贴好名牌后，元素就能准确入住。但房间之间还需要留一点空隙，这就是接下来要讲的间距控制。

grid-template-areas:  "header header header"  "sidebar main   main"  "footer footer footer";

间距控制：给房间留走廊

再紧凑的户型，也不会让两堵墙零距离贴在一起，总要留步行通道。CSS Grid 的 gap 就是这条走廊，专门控制网格轨道之间的间距。gap: 10px 20px; 表示行间距 10px、列间距 20px；也可以分开写成 row-gap 和 column-gap。

与 margin 不同，gap 是网格容器内部的“公共走廊”，不会算进某个房间的宽度里，也不会让容器被内容撑破。负的 gap 是不合法的，浏览器会忽略它。布局里一旦有多个轨道，计算总占用宽度时，必须把这些走廊也加进去：

走廊留好了，接下来要解决的是：如果家具没有被指定房间，它们该怎么自动摆放？

自动排列：让机器人摆家具

不是每件家具都要你亲手指定房间。网格里没有写 grid-area 的项目，会自动按照顺序填进单元格，这个行为由 grid-auto-flow 控制。默认值是 row，像机器人先横着把第一排摆满，再换到第二排；设为 column 则会先竖着摆。

如果预先定义的行或列不够用，Grid 会自动创建额外轨道，这些轨道叫“隐式轨道”。它们就像户型图外临时搭出来的储物间。dense 关键字则让机器人更聪明：遇到空洞时，先拿后面的家具回头补上，让房间更紧凑，但视觉顺序可能不再完全等于源代码顺序。自动排列需要的总行数可以这样估计：

自动摆放解决了“塞得下”的问题，但手机和电脑屏幕大小不同，户型图还需要能变形。

响应式设计：会变形的户型图

同一个家，在手机上是紧凑的一居室，在电脑上就是开阔的大平层。CSS Grid 的响应式设计，就是让户型图根据屏幕尺寸自动调整房间数量和大小。最常见的工具是媒体查询：在小屏幕上换一套 grid-template-areas，在大屏幕上再换一套。

另一个利器是 minmax(200px, 1fr)：它规定轨道“最小不能小于 200px，最大可以按比例伸展”。配合 auto-fit 或 auto-fill，浏览器能自动决定一排放几列。auto-fill 倾向于尽量多放空轨道，auto-fit 倾向于把空轨道折叠后让项目变宽。auto-fill 能放下的列数大致可以这样估算：

户型图会变形之后，整个页面骨架就活了。但房间内部的细节，还需要另一个工种来配合。

与Flex配合：两个工种分工

CSS Grid 是整屋设计师，负责“哪里放客厅、哪里放卧室”的二维大结构；Flexbox 是室内整理师，负责“书架上摆一排书、导航栏里排一排按钮”的一维小细节。两者不是对手，而是搭档。

在实际页面中，最常见的策略是“外层 Grid 拼骨架，内层 Flex 做排列”。比如整个后台页面用 grid-template-areas 分成顶栏、侧边栏、主内容区，而主内容区内部的一排操作按钮，再用 display: flex 来对齐。这样各司其职，代码清晰又灵活：

现在你已经有了完整的“装修工具箱”：先画户型图，再定义行与列，给房间命名，留出走廊，最后让 Grid 和 Flex 分工协作。下一次看到复杂页面，你就不再是“摆鞋柜”的新手，而是能画出整屋图纸的设计师了。

---

AI 应用场景

Python 演示

# -*- coding: utf-8 -*-# Parse grid-template-areas strings and generate CSS Grid codeimport re  class GridAreaParser:    def __init__(self, css_areas: str):        self.css_areas = css_areas        self.area_rows = []        self.area_map = {}        self.row_count = 0        self.col_count = 0        self._parse()     def _parse(self):        lines = [ln.strip() for ln in self.css_areas.strip().splitlines() if ln.strip()]        rows = [re.split(r"\s+", ln) for ln in lines]        self.row_count = len(rows)        self.col_count = max(len(r) for r in rows)        for r, row in enumerate(rows):            for c, name in enumerate(row):                if name == ".":                    continue                if name not in self.area_map:                    self.area_map[name] = [r, c, r + 1, c + 1]                else:                    e = self.area_map[name]                    e[0] = min(e[0], r)                    e[1] = min(e[1], c)                    e[2] = max(e[2], r + 1)                    e[3] = max(e[3], c + 1)        self.area_rows = rows     def to_css(self):        lines = [            "display: grid;",            "grid-template-columns: repeat({}, 1fr);".format(self.col_count),            "grid-template-rows: repeat({}, 1fr);".format(self.row_count),            "grid-template-areas:",        ]        for row in self.area_rows:            lines.append("  \"{}\";".format(" ".join(row)))        for name in self.area_map:            r1, c1, r2, c2 = self.area_map[name]            lines.append(".{} {{ grid-area: {} / {} / {} / {}; }}".format(name, r1 + 1, c1 + 1, r2, c2))        return "\n".join(lines) + "\n"  if __name__ == "__main__":    layout = """      header header header      sidebar main   main      footer footer footer    """    parser = GridAreaParser(layout)    print("rows:", parser.row_count, "cols:", parser.col_count)    print(parser.to_css())

1. rows = [re.split(r"\s+", ln) for ln in lines]把户型图的每一行文字拆成单元格名字，变成二维数组。
2. if name not in self.area_map:第一次遇到区域名时，记录它的起点和终点坐标。
3. e[0] = min(e[0], r)不断向外扩展边界，让同名区域最终围成一个完整矩形。
4. lines.append("grid-template-areas:")生成 CSS 里最像“字符地图”的属性。
5. ".{} {{ grid-area: {} / {} / {} / {}; }}".format(...)把每个区域名转换为四线定位，对应 grid-row-start / grid-column-start / grid-row-end / grid-column-end。

常见误区

面试题