-
.comtainer{
grid-template:
[row1-start] "header header header " 25px [row1-end]
[row2-start] "footer footer footer " 25px [row2-end]
/auto 50px auto;
}
查看全部 -
none :将三个属性都设置未其初始值
subgrid:吧grid-template-rows和grid-template-columns设置未subgrid，并且grid-template-areas设置未初始值
grid-template-rows/grid-template-columns:吧grid-template-columns和grid-template-rows设置未指定值，与此同时，设置grid-template-areas 问none
查看全部 -
在单个声明中定义grid-templates-rows , grid-template-columns,grid-template-area
查看全部 -
.container{
grid-template:none | subgrid | <grid-template-rows>/<grid-template-columns>
}
查看全部 -
.container{
frid-template-areas:none|
"grid-area-name|.grid-area-nam|.grid-area-nam|. ..."
"grid-area-nam|.grid-area-name|.grid-area-nam|. ..."
"...."
}
查看全部 -
.container{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
grid-template-rows:auto auto auto;
}
查看全部 -
container{
display:grid;
grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows:25% 100px auto;
}
查看全部 -
justify-content:设置网格容器的网格沿着行轴（水平）对齐网格的对齐方式,，即网格与容器的对齐方式。
justify-content : start | end | center | stretch | space-around | space-betwwen | space-evenly
align-content : start | end | center | stretch | space-around | space-betwwen | space-evenly
space-content : start end //先列后行 start--列属性值，end---行属性值。
start：网格与网格容器左端 / 顶部对齐
end：网格与网格容器右端 / 底部对齐
center：网格与网格容器的水平 / 垂直中间位置
stretch：调整grid item的大小，让宽度填充整网格个容器
space-around：在grid item之间设置均等宽度的空白间隙，其边缘间隙大小为中间空白间隙宽度的一半
space-between：在grid item之间设置均等宽度的空白间隙，其边缘间隙不存在
space-evenly：在每个grid item之间设置均等宽度的空白间隙，包括其边缘间隙
查看全部 -
网格区域 grid-template-areas: 通过引用grid-area属性指定的网格区域的名称来定义网络模板
代码示例：
grid-template-areas："header header header header"
"main main . main" //.点号表示空网格单元
"footer footer footer footer"；
查看全部 -
grid-template中的属性值 line-name：网格线名字，网格线名称主要是为了对网格区域进行更好的描述。可以为网格线起任一名字。格式如下：
查看全部 -
grid-template-areas 命名
查看全部 -
grid 简写形式
查看全部 -
grid-template-areas
查看全部 -
行列，两端固定宽度，中间auto
查看全部 -
网格布局学习目标
查看全部
举报