-
.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
查看全部 -
網格布局學習目標
查看全部
舉報