UD5工具箱
CSS Grid术语表
在使用CSS Grid布局生成器时，你会遇到许多专业术语。理解这些概念有助于更精确地控制布局效果，生成符合需求的代码。以下是CSS Grid相关的核心术语详解。
基础概念
网格容器（Grid Container）
设置display: grid或display: inline-grid的元素，成为网格布局的父容器。所有直接子元素自动成为网格项（grid items）。网格容器定义了整个布局的结构，包括列数、行数、间距等核心属性。
网格项（Grid Item）
网格容器的直接子元素，自动成为网格项。每个网格项占据网格中的一个或多个单元格。网格项可以设置跨列（grid-column）和跨行（grid-row）属性来占据多个单元格，也可以设置align-self和justify-self来单独控制对齐。
网格线（Grid Line）
网格的水平和垂直分割线，从1开始编号。例如3列网格有4条垂直线（1、2、3、4）。grid-column: 1 / 3表示从第1条线到第3条线，跨越2列。理解网格线是精确控制网格项位置的基础。
网格单元格（Grid Cell）
网格中最小的单位，由相邻的两条水平网格线和两条垂直网格线围成。每个单元格可以容纳一个网格项。默认情况下每个网格项占据一个单元格，通过跨列/跨行可以占据多个单元格。
布局属性
fr 单位（Fraction）
Grid专用单位，表示可用空间的一份。例如grid-template-columns: 1fr 2fr 1fr将可用宽度分为4份，第一列占1份、第二列占2份、第三列占1份。fr单位会自动减去gap后再分配，非常灵活，是Grid布局中最推荐使用的单位。
grid-template-columns
定义网格的列数和每列的宽度。常用值：1fr 1fr（等分两列）、200px 1fr（固定侧边栏+自适应内容）、repeat(3, 1fr)（三列等分）。是Grid布局最核心的属性之一，直接决定页面的列结构。
grid-template-rows
定义网格的行数和每行的高度。常用值：auto（根据内容自动调整）、100px 1fr（固定头部+自适应内容区）。与grid-template-columns配合使用，共同定义网格的整体结构。
gap
控制网格项之间的间距，取代旧版的grid-gap。支持分别设置row-gap和column-gap，或使用简写gap: row-gap column-gap。gap属性同时适用于Grid和Flexbox，是现代布局中控制间距的标准方式。
auto-fill 和 auto-fit
用于repeat()函数中，auto-fill自动填充尽可能多的列（即使空间不够），auto-fit则将空列折叠。配合minmax()使用可实现响应式布局：repeat(auto-fill, minmax(250px, 1fr))会根据容器宽度自动决定列数。
对齐与跨项
grid-column / grid-row
控制网格项在网格中的位置和跨度。grid-column: span 2表示跨2列，grid-column: 1 / 3表示从第1条线到第3条线（跨2列）。grid-row同理控制垂直方向的跨度。也可简写为grid-area: row-start / col-start / row-end / col-end。
justify-content / align-content
控制网格整体在容器内的分布。justify-content控制水平方向，align-content控制垂直方向。常用值：start（起始对齐）、center（居中）、stretch（拉伸）、space-between（两端对齐）、space-around（均匀分布）、space-evenly（等间距分布）。
justify-items / align-items
控制每个网格项在单元格内的对齐方式。justify-items控制水平方向，align-items控制垂直方向。常用值：stretch（拉伸填充，最常用）、start（起始对齐）、center（居中）、end（末尾对齐）。