-
1,justify-content
--设置网格容器内的所有网格沿着行轴的对齐方式
语法
justify-content: start |end |center | stretch |space-around | space-between | space-evenly;
2,align-content
--设置网格容器内所有网格在列轴上的对齐方式
语法
align-content: start | end | stretch | space-around(单元格与单元格之间的间隙是两端间隙的两倍) | space-between | space-evenly(两端的间隙和单元格与单元格之间的间隙一样)
简写
3,place-content
语法
place-content:<align-content> <justify-content>;
查看全部 -
1,justify-items
--沿着行轴对齐网格内的内容
语法
justify-items: start | end | center | stretch(默认值);
2,align-items
--沿着列轴对齐网格内的内容
语法
align-items:start | end | center | stretch(默认值);
3,place-items
语法
place-items:<align-items> <justify-items>;
查看全部 -
grid-column-gap/grid-row-gap
--指定网格线的大小,可以想象为设置列/行之间的宽度。
简写
grid-gap: <grid-row-gap> <grid-column-gap >;不过逐渐可以使用gap简写来替代grid-gap,如果兼容IE,最好两个都写上。
查看全部 -
repeat() 只能用在已有的元素上
查看全部 -
grid-template简写属性
属性值
1:<none>将三个属性都设置为其初始值
2:<subgrid >把grid-template-rows和grid-template-columns设置为subgrid,并且grid-template-areas设置为初始值(即一个单元格的大小)
3:<grid-template-rows/grid-template-columns>把grid-template-rows和grid-template-columns设置为指定值,于此同时,设置grid-template-areas为none
查看全部 -
grid-template-areas例子
查看全部 -
grid-template-areas语法
属性值
1:<grid-area-name>:使用grid-area属性设置的网格
2:".":点号代表一个空单元格
3:none:没有定义网格区域
查看全部 -
line-name(网格线的名字)
[]包裹,可以有多个名字,用空格隔开即可
--例子
查看全部 -
grid-template-columns和grid-template-rows
语法
grid-template-columns:<track-size>..| <line-name> <track-size> ...;
grid-template-rows:<track-size> | <inline-name> <track-size> ...;
参数说明
1:track-size(轨道大小):可以使用css长度(px,em,rem等),百分比或用分数(用fr单位)
2:line-name(网格线的名字:可以选择任何名字
查看全部 -
display: grid | inline-grid | subgrid;
注意
--当元素设置成网格布局,column,float,clear,vertical-align属性无效。subgrid目前所有浏览器都不兼容
查看全部 -
单位
fr-->剩余空间分配数,类似于flex布局的属性flex-grow
gr-->网格数(目前w3c并未采纳这个单位)
查看全部 -
网格区域
--四个网格线包围的中总空间
查看全部 -
网格单元--grid cell
--两个相邻的列网格线和两个相邻的行网格线组成的是网格单元
注意
要区分网格单元和网格项,网格项是实实在在存在的,而网格单元则如同图中空白的区域,是找不到的
查看全部 -
网格轨道
--两个相邻的网格线之间为网格轨道
查看全部 -
Grid和Flexbox的区别
查看全部
举报