通过命名网格线可直观控制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;
}
这会将元素放置在主内容区域，由命名线界定范围。
如果有多条轨道，可以使用 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 等方式引用。
基本上就这些。合理命名网格线能让布局结构清晰，减少对数字索引的依赖，提升可维护性。不复杂但容易忽略细节。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
824
收藏
