css布局——GFC

 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:填满(默认)。

图片


justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
对齐方式(针对容器内的网格横向对齐方式)


属性值:
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。
 
图片

 


align-content: start | end | center | stretch | space-around | space-between | space-evenly ;
对齐方式(针对容器内的网格纵向对齐方式)


属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。

 图片


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>: 可以是数字或网格线名字。
图片


justify-self: justify-self: start | end | center | stretch;

定义单个网格项垂直于列网格线的对齐方式。

start: 网格区域左对齐。
end: 网格区域右对齐。
center: 网格区域居中。
stretch: 网格区域填满。

图片
图片

align-self: start | end | center | stretch;

定义单个网格项垂直于行网格线的对齐方式。
start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。

图片
图片
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页