gfc：css布局——GFC

2024-04-04 19:01:45 0 0

GFC又称为网格布局

术语：

【网格容器（Grid Container）】

最外层div设置为display：grid；最外层就是网格容器。

【网格项（Grid Item）】

内部子元素就是网格

【网格线（Grid Line）】

组成网格线的分界线。分为横网格线，列网格线。

【网格轨道（Grid Track）】

相邻的网格线组成的网格轨道，也就是行或列。

【网格单元（Grid Cell）】

相邻的行网格线和列网格线组成的单元格

【网格区（Grid Area）】

由任意数量的单元格组成的。

属性：

display: grid | inline-grid | subgrid;

grid: 生成块级网格
inline-grid: 生成行内网格
subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。
注：当元素设置了网格布局，column、float、clear、vertical-align属性无效。

grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;

设置行和列的大小，在行轨道或列轨道两边是网格线。

属性值：
track-size: 轨道大小，可以使用css长度，百分比或用分数（用fr单位）。
line-name: 网格线名字，你可以选择任何名字。

grid-template-areas：定义网格区域

属性值：
grid-area-name: 网格项的grid-area属性值（名字）
‘.’ : 空网格单元
none: 不定义网格区域

grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;
网格单元间距。

属性值：
line-size: 网格线间距,设置单位值

间隔仅仅作用在网格单元之间，不作用在容器边缘。

grid-gap：<grid-row-gap> <grid-column-gap>;
是grid-column-gap 和 grid-row-gap简写

justify-items: start | end | center | stretch（默认）
对齐方式（横向）

属性值：
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满（默认）。

align-items: start | end | center | stretch ;
对齐方式（纵向）

属性值：
start：顶部对齐。
end：底部对齐。
center：居中对齐。
stretch：填满（默认）。

grid-auto-columns：
grid-auto-rows：
隐形网格（超出轨道网格）：网格轨道大小,可以是固定值，百分比或者是分数（fr单位）。

a：列在第一条和第二条网格线之间
行在第二行和第三行之间

b：列在第五列和第六列之间
行在第二行和第三行之间

grid-auto-flow : row（默认） | column | dense row: 按照行依次从左到右排列。
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];
设置网格容器所有属性
none: 设置为所有属性的默认值。
<grid-template-rows> / <grid-template-columns>: 设置行和列的值，其他属性为默认值。
<grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 设置网格自动流、网格自动行、网格自动列的值，其他未设置则为默认值。

设置在网格项上的属性

    grid-column-start
    grid-column-end
    grid-row-start
    grid-row-end
    grid-column
    grid-row
    grid-area
    justify-self
    align-self

属性值：
line: 指定带编号或者名字的网格线。
span <number>: 跨越轨道的数量。
span <name>: 跨越轨道直到对应名字的网格线。
auto: 自动展示位置，默认跨度为1。

如果未声明grid-column-end或grid-row-end，默认将跨越一个轨道。项目也可以重叠，设置z-index来确定堆叠顺序

grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
grid-row: <start-line> / <end-line> | <start-line> / span <value> ;

grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
定义网格项名字，以便创建模块（容器属性grid-template-areas来定义模块）。
name: 项目名子。
<row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字。