-
網(wǎng)格相關的函數(shù)：
1、repeat(重復的次數(shù)，每一個的值);? 跟蹤列表的重復片段，允許大量顯示重復模式的列或行以更緊湊的形式編寫
如? ?grid-template-columns：repeat(5,1fr)；
等同于? ?grid-template-columns：1fr 1fr 1fr 1fr 1fr；
2、fit-content(寬度);? 根據(jù)min（最大大小，max（最小大小，參數(shù)））將給定大小夾緊為可用大小，若小于給定的大小，就壓縮到最小的寬度大小
如? grid-template-columns：100px fit-content(200px) 10% 1fr；
3、minmax(最小值，最大值);? ?定義一個長寬范圍的閉區(qū)間
查看全部 -
grid-auto-columns? /? ? grid-auto-rows
指定自動生成的網(wǎng)格軌道（又名隱式網(wǎng)格軌道）的大小
隱式網(wǎng)格軌道在顯式的定位超出指定網(wǎng)格范圍的行或列時被創(chuàng)建
grid-auto-flow：row/column/row dense/column dense;? ? 控制自動布局算法的工作方式
row：從左到右一行一行依次填充每行
column：從上到下一列一列依次填充每列
dense：若后面出現(xiàn)較小的grid item，則嘗試在網(wǎng)格中填充空洞，如內(nèi)容放不下就在后面找一個能放下的網(wǎng)格單元放，把后面小的內(nèi)容放到這個網(wǎng)格單元
查看全部 -
網(wǎng)格容器內(nèi)的網(wǎng)格對齊問題：
justify-content：start/end/center/stretch/space-around/space-between/space-evenly;
align-content：start/end/center/stretch/space-around/space-between/space-evenly;
或
place-content：center end；? //先列后行
start：網(wǎng)格與網(wǎng)格容器左端? /? 頂部對齊
end：網(wǎng)格與網(wǎng)格容器右端? /? 底部對齊
center：網(wǎng)格與網(wǎng)格容器的水平? /? 垂直中間位置
stretch：調(diào)整grid item的大小，讓寬度填充整網(wǎng)格個容器
space-around：在grid item之間設置均等寬度的空白間隙，其邊緣間隙大小為中間空白間隙寬度的一半
space-between：在grid item之間設置均等寬度的空白間隙，其邊緣間隙不存在
space-evenly：在每個grid item之間設置均等寬度的空白間隙，包括其邊緣間隙
查看全部 -
hack查看全部
-
網(wǎng)格項的對齊問題：
justify-items：start/end/center/stretch;
align-items：start/end/center/stretch;
或
place-items：center end；? //先列后行
start：內(nèi)容與網(wǎng)格區(qū)域左端? /? 頂部對齊
end：內(nèi)容與網(wǎng)格區(qū)域右端? /? 底部對齊
center：內(nèi)容位于網(wǎng)格區(qū)域的水平? /? 垂直中間位置
stretch：內(nèi)容寬度占據(jù)整個網(wǎng)格區(qū)域空間（默認值）
查看全部 -
網(wǎng)格單元間的空隙：
grid-column-gap:10px;
grid-row-gap:15px;
或
grid-gap：15px 10px；? ?//先行后列
或
gap：15px 10px；
grid-gap：10px；? //若只寫了一個，認為另一個與之相同
查看全部 -
網(wǎng)格區(qū)域：
grid-template-areas："header header header header"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"main main . main"? ? ? //.點號表示空網(wǎng)格單元
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "footer footer footer footer"；
查看全部 -
給網(wǎng)格線取名字：
grid-template-columns：[first] 40px [second] 20px [third] 40px [end];
grid-template-rows：[first] 40px [second] 20px [end];
查看全部 -
網(wǎng)格布局的grid-template，使用空格分隔的多個值來定義網(wǎng)格的列和行：
grid-template-columns：100px auto 10% 1fr 2fr;網(wǎng)格有有5列，第一列寬度為100px，第二列為每個單元格內(nèi)容的寬度，第三列為網(wǎng)格容器寬度的10%，第四列、第五列是總寬度減去一二三列的寬度后按1:2的比列分配的寬度
grid-template-rows：200px auto;網(wǎng)格有兩行，第一行高度為200px，第二行高度為單元格內(nèi)容的高度
若單元格數(shù)多于寫的行數(shù)和列數(shù)，后面為定義的行的寬度為auto
查看全部 -
當元素設置了網(wǎng)格布局，
display：grid? |? inline-grid? |? subgrid；
column、float、clear、vertical-align屬性無效
查看全部 -
用grid做整體布局，用flexbox做局部布局
查看全部 -
在不懂查看全部
-
我不懂查看全部
-
1,justify-content
--設置網(wǎng)格容器內(nèi)的所有網(wǎng)格沿著行軸的對齊方式
語法
justify-content: start |end |center | stretch |space-around | space-between | space-evenly;
2，align-content
查看全部 -
grid-template-columns????有幾個數(shù)值就分成多少列；
grid-template-rows????有幾個數(shù)值就分成多少行；
auto在沒有fr的情況下會自動撐開剩余空間，但如果有fr，auto則會顯示出最小值（在沒有寬度的情況下，auto默認為0，顯示內(nèi)容寬度）；簡單說可以理解成優(yōu)先于fr；
查看全部
舉報