通过命名网格线可直观控制CSS Grid布局位置。定义时用[名称]为行列线命名，如[start] 100px [main-start] 1fr [main-end]，支持多名称与语义化命名；项内使用grid-column: main-start / main-end定位；结合repeat(3, [col] 1fr [gap])可重复命名并自动编号，提升可读性与维护性。
CSS Grid 布局中，可以通过为网格线命名来更直观地控制网格项的位置。命名方式让代码更具可读性，也方便维护。下面介绍如何在定义网格时为行和列的线命名。
基本语法：在定义网格时命名线
使用 fr、px 等单位定义轨道的同时，可以在括号中为每条网格线赋予名称。
例如：
.container {
display: grid;
grid-template-columns: [start] 100px [main-start] 1fr [main-end] 50px [end];
grid-template-rows: [header-top] 60px [header-bottom main-top] 1fr [main-bottom footer-top] 40px [footer-bottom];
}
说明：
- 每条线可以有多个名字，用空格分隔，如
[header-bottom main-top]表示这一条线同时属于 header 的底部和 main 的顶部。 - 名称自定义，建议语义化，比如
sidebar-start、content-end等。
在网格项中使用命名线定位
通过 grid-column 和 grid-row 属性，引用之前定义的线名来放置元素。
立即学习“前端免费学习笔记（深入）”；
例如：
.item {
grid-column: main-start / main-end;
grid-row: main-top / main-bottom;
}
这会将元素放置在主内容区域，由命名线界定范围。
jquery插件库合集
下载
pui 是一款基于jQyery开发的插件库。目前线上稳定使用已有2年多，丰富的接口，简单明了的调用方式，灵活的回调函数，让您轻轻松松打造出富有灵活交互的Web前端界面解决方案。 插件库封装了布局、表单元素、表单校验、弹窗、toast、气泡pop、tab切换、日历时间、分页、表格、树、css命名等功能
重复命名与隐式编号
如果有多条轨道，可以使用 repeat() 并结合命名。
例如：
.container {
grid-template-columns: repeat(3, [col] 1fr [gap]);
}
这等价于：
[col] 1fr [gap] [col] 1fr [gap] [col] 1fr [gap]
此时每条名为 col 或 gap 的线会自动按出现顺序编号，如 col 1、col 2，可在布局中使用 col 2 / gap 3 等方式引用。
基本上就这些。合理命名网格线能让布局结构清晰，减少对数字索引的依赖，提升可维护性。不复杂但容易忽略细节。
