-
.comtainer{
grid-template:
[row1-start] "header header header " 25px [row1-end]
[row2-start] "footer footer footer " 25px [row2-end]
/auto 50px auto;
}
查看全部 -
none :將三個(gè)屬性都設(shè)置未其初始值
subgrid:吧grid-template-rows和grid-template-columns設(shè)置未subgrid，并且grid-template-areas設(shè)置未初始值
grid-template-rows/grid-template-columns:吧grid-template-columns和grid-template-rows設(shè)置未指定值，與此同時(shí)，設(shè)置grid-template-areas 問(wèn)none
查看全部 -
在單個(gè)聲明中定義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:設(shè)置網(wǎng)格容器的網(wǎng)格沿著行軸（水平）對(duì)齊網(wǎng)格的對(duì)齊方式,，即網(wǎng)格與容器的對(duì)齊方式。
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：網(wǎng)格與網(wǎng)格容器左端? /? 頂部對(duì)齊
end：網(wǎng)格與網(wǎng)格容器右端? /? 底部對(duì)齊
center：網(wǎng)格與網(wǎng)格容器的水平? /? 垂直中間位置
stretch：調(diào)整grid item的大小，讓寬度填充整網(wǎng)格個(gè)容器
space-around：在grid item之間設(shè)置均等寬度的空白間隙，其邊緣間隙大小為中間空白間隙寬度的一半
space-between：在grid item之間設(shè)置均等寬度的空白間隙，其邊緣間隙不存在
space-evenly：在每個(gè)grid item之間設(shè)置均等寬度的空白間隙，包括其邊緣間隙
查看全部 -
網(wǎng)格區(qū)域 grid-template-areas: 通過(guò)引用grid-area屬性指定的網(wǎng)格區(qū)域的名稱來(lái)定義網(wǎng)絡(luò)模板
代碼示例：
grid-template-areas："header header header header"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"main main . main"? ? ? //.點(diǎn)號(hào)表示空網(wǎng)格單元
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "footer footer footer footer"；
查看全部 -
grid-template中的屬性值 line-name：網(wǎng)格線名字，網(wǎng)格線名稱主要是為了對(duì)網(wǎng)格區(qū)域進(jìn)行更好的描述。可以為網(wǎng)格線起任一名字。格式如下：
查看全部 -
grid-template-areas? 命名
查看全部 -
grid 簡(jiǎn)寫形式
查看全部 -
grid-template-areas
查看全部 -
行列，兩端固定寬度，中間auto
查看全部 -
網(wǎng)格布局學(xué)習(xí)目標(biāo)
查看全部
舉報(bào)