GFC又称为网格布局
术语:
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];
设置网格容器所有属性
![图片](https://i-blog.csdnimg.cn/blog_migrate/b911b9b1308ba9a6c53391b7a7a9744d.jpeg)
设置在网格项上的属性
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来确定堆叠顺序
![图片](https://i-blog.csdnimg.cn/blog_migrate/57b00c643bca8daac4b4662b673f751e.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/4291cf0997bb2cbd6f15dff392f531f8.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/af32c496f9c9ca591659992a0071bd6b.jpeg)
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。
name: 项目名子。
<row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字。
![图片](https://i-blog.csdnimg.cn/blog_migrate/65af2c2826e58ec75398f84e0345c7da.jpeg)
justify-self: justify-self: start | end | center | stretch;
定义单个网格项垂直于列网格线的对齐方式。
![图片](https://i-blog.csdnimg.cn/blog_migrate/29d9886eb9f333a87f68cf72bc03a2f9.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/edb9038d728352d4c644dc2ba2720e52.jpeg)
align-self: start | end | center | stretch;
定义单个网格项垂直于行网格线的对齐方式。
start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。
![图片](https://i-blog.csdnimg.cn/blog_migrate/13bff1efb608b58c0d5c7f663d910621.jpeg)
术语:
【网格容器(Grid Container)】
最外层div设置为display:grid;最外层就是网格容器。
【网格项(Grid Item)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/3454214081264c04d66ecd62488d3b21.jpeg)
内部子元素就是网格
【网格线(Grid Line)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/b59180ef41ac8a55014ff8944cc594d4.jpeg)
组成网格线的分界线。分为横网格线,列网格线。
【网格轨道(Grid Track)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/6d4142fb37a9a9d390cda848790d9c01.jpeg)
相邻的网格线组成的网格轨道,也就是行或列。
【网格单元(Grid Cell)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/e5e3ee2adbb4abdfbf0d5a370d1e36ba.jpeg)
相邻的行网格线和列网格线组成的单元格
【网格区(Grid Area)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/f3d06b346cce798ff7520ce9e98e1d12.jpeg)
由任意数量的单元格组成的。
属性:
display: grid | inline-grid | subgrid;
grid: 生成块级网格
inline-grid: 生成行内网格
subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小。
注:当元素设置了网格布局,column、float、clear、vertical-align属性无效。
![](https://i-blog.csdnimg.cn/blog_migrate/08495b3d4babaa0abd857ccf86bbe04f.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/24e87824bdc11ed882879c2bb1f92366.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/f8170b8c40d0d95b986564e762ef75be.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/ae4df8f9d47ba54b8134bfb7a888e99a.jpeg)
grid-template-areas:定义网格区域
属性值:
grid-area-name: 网格项的grid-area属性值(名字)
‘.’ : 空网格单元
none: 不定义网格区域
![图片](https://i-blog.csdnimg.cn/blog_migrate/36a70905df103517f66d18159814457b.jpeg)
grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;
网格单元间距。
属性值:
line-size: 网格线间距,设置单位值
![图片](https://i-blog.csdnimg.cn/blog_migrate/622025a2163fe1a0f3bc9fccb9304111.jpeg)
间隔仅仅作用在网格单元之间,不作用在容器边缘。
grid-gap:<grid-row-gap> <grid-column-gap>;
是grid-column-gap 和 grid-row-gap简写
![图片](https://i-blog.csdnimg.cn/blog_migrate/92f41217741358b12a643d2812a5fef1.jpeg)
justify-items: start | end | center | stretch(默认)
对齐方式(横向)
属性值:
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满(默认)。
![图片](https://i-blog.csdnimg.cn/blog_migrate/5221bd3ea9a082c45899959fc8432824.png)
align-items: start | end | center | stretch ;
对齐方式(纵向)
属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch:填满(默认)。
![图片](https://i-blog.csdnimg.cn/blog_migrate/89d4b93962ab222e1d259adca781b0e7.png)
justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
对齐方式(针对容器内的网格横向对齐方式)
![图片](https://i-blog.csdnimg.cn/blog_migrate/6ffecfe95e68e12680d551bf4b6b1a07.png)
align-content: start | end | center | stretch | space-around | space-between | space-evenly ;
对齐方式(针对容器内的网格纵向对齐方式)
grid-auto-columns:
grid-auto-rows:
隐形网格(超出轨道网格):网格轨道大小,可以是固定值,百分比或者是分数(fr单位)。
![图片](https://i-blog.csdnimg.cn/blog_migrate/3860ffd000ba37b9ec8a986fff514c56.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/13aec04ea55dc65ac16941b0fdc9a7d4.jpeg)
a:列在第一条和第二条网格线之间
行在第二行和第三行之间
b:列在第五列和第六列之间
行在第二行和第三行之间
![图片](https://i-blog.csdnimg.cn/blog_migrate/67d79a364084b7756a15a9281c697c39.jpeg)
grid-auto-flow : row(默认) | column | dense
row: 按照行依次从左到右排列。
![](https://i-blog.csdnimg.cn/blog_migrate/fcfaa6397ec1e112fd5e183ddcfe2b38.jpeg)
最外层div设置为display:grid;最外层就是网格容器。
【网格项(Grid Item)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/3454214081264c04d66ecd62488d3b21.jpeg)
内部子元素就是网格
【网格线(Grid Line)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/b59180ef41ac8a55014ff8944cc594d4.jpeg)
组成网格线的分界线。分为横网格线,列网格线。
【网格轨道(Grid Track)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/6d4142fb37a9a9d390cda848790d9c01.jpeg)
相邻的网格线组成的网格轨道,也就是行或列。
【网格单元(Grid Cell)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/e5e3ee2adbb4abdfbf0d5a370d1e36ba.jpeg)
相邻的行网格线和列网格线组成的单元格
【网格区(Grid Area)】
![图片](https://i-blog.csdnimg.cn/blog_migrate/f3d06b346cce798ff7520ce9e98e1d12.jpeg)
由任意数量的单元格组成的。
属性:
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: 网格线名字,你可以选择任何名字。
![](https://i-blog.csdnimg.cn/blog_migrate/08495b3d4babaa0abd857ccf86bbe04f.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/24e87824bdc11ed882879c2bb1f92366.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/f8170b8c40d0d95b986564e762ef75be.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/ae4df8f9d47ba54b8134bfb7a888e99a.jpeg)
grid-template-areas:定义网格区域
属性值:
grid-area-name: 网格项的grid-area属性值(名字)
‘.’ : 空网格单元
none: 不定义网格区域
![图片](https://i-blog.csdnimg.cn/blog_migrate/36a70905df103517f66d18159814457b.jpeg)
grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;
网格单元间距。
属性值:
line-size: 网格线间距,设置单位值
![图片](https://i-blog.csdnimg.cn/blog_migrate/622025a2163fe1a0f3bc9fccb9304111.jpeg)
间隔仅仅作用在网格单元之间,不作用在容器边缘。
grid-gap:<grid-row-gap> <grid-column-gap>;
是grid-column-gap 和 grid-row-gap简写
![图片](https://i-blog.csdnimg.cn/blog_migrate/92f41217741358b12a643d2812a5fef1.jpeg)
justify-items: start | end | center | stretch(默认)
对齐方式(横向)
属性值:
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满(默认)。
![图片](https://i-blog.csdnimg.cn/blog_migrate/5221bd3ea9a082c45899959fc8432824.png)
align-items: start | end | center | stretch ;
对齐方式(纵向)
属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch:填满(默认)。
![图片](https://i-blog.csdnimg.cn/blog_migrate/89d4b93962ab222e1d259adca781b0e7.png)
justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
对齐方式(针对容器内的网格横向对齐方式)
属性值:
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。
start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。
![图片](https://i-blog.csdnimg.cn/blog_migrate/6ffecfe95e68e12680d551bf4b6b1a07.png)
align-content: start | end | center | stretch | space-around | space-between | space-evenly ;
对齐方式(针对容器内的网格纵向对齐方式)
属性值:
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。
start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。
![图片](https://i-blog.csdnimg.cn/blog_migrate/9491fad96025a0f9f0c11e148451af0e.png)
grid-auto-columns:
grid-auto-rows:
隐形网格(超出轨道网格):网格轨道大小,可以是固定值,百分比或者是分数(fr单位)。
![图片](https://i-blog.csdnimg.cn/blog_migrate/3860ffd000ba37b9ec8a986fff514c56.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/13aec04ea55dc65ac16941b0fdc9a7d4.jpeg)
a:列在第一条和第二条网格线之间
行在第二行和第三行之间
b:列在第五列和第六列之间
行在第二行和第三行之间
![图片](https://i-blog.csdnimg.cn/blog_migrate/67d79a364084b7756a15a9281c697c39.jpeg)
grid-auto-flow : row(默认) | column | dense
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。
![图片](https://i-blog.csdnimg.cn/blog_migrate/c3b2cead0e8d7fa713e827eebbc389f1.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/0d40cd50bebb76a59c9b4ce182a20d74.jpeg)
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-template-rows> / <grid-template-columns>: 设置行和列的值,其他属性为默认值。
<grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 设置网格自动流、网格自动行、网格自动列的值,其他未设置则为默认值。
![图片](https://i-blog.csdnimg.cn/blog_migrate/b911b9b1308ba9a6c53391b7a7a9744d.jpeg)
设置在网格项上的属性
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来确定堆叠顺序
![图片](https://i-blog.csdnimg.cn/blog_migrate/57b00c643bca8daac4b4662b673f751e.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/4291cf0997bb2cbd6f15dff392f531f8.jpeg)
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 的简写。
![图片](https://i-blog.csdnimg.cn/blog_migrate/af32c496f9c9ca591659992a0071bd6b.jpeg)
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>
定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。
name: 项目名子。
<row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字。
![图片](https://i-blog.csdnimg.cn/blog_migrate/65af2c2826e58ec75398f84e0345c7da.jpeg)
justify-self: justify-self: start | end | center | stretch;
定义单个网格项垂直于列网格线的对齐方式。
start: 网格区域左对齐。
end: 网格区域右对齐。
center: 网格区域居中。
stretch: 网格区域填满。
![图片](https://i-blog.csdnimg.cn/blog_migrate/29d9886eb9f333a87f68cf72bc03a2f9.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/edb9038d728352d4c644dc2ba2720e52.jpeg)
align-self: start | end | center | stretch;
定义单个网格项垂直于行网格线的对齐方式。
start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。
![图片](https://i-blog.csdnimg.cn/blog_migrate/13bff1efb608b58c0d5c7f663d910621.jpeg)
![图片](https://i-blog.csdnimg.cn/blog_migrate/5710ba16ac1291dd2b43552d8606b9d5.jpeg)