display:;
grid
inline-grid
劃分行:
grid-template-rows:;
px %
fr重複: repeat(行數,均分fr)
劃分列:
grid-template-columns:;
px %
fr重複: repeat(列數,均分fr)
劃分區域:
grid-template-areas:
"區域1 區域2 區域3"
"區域4 區域5 區域6";
注意:必須分了行和列,子元素佔區域時,需要結合專案屬性grid-area:區域名字;
行間距 列間距
grid-row-gap:10px;行間距
grid-column-gap:4px;列間距
綜合寫法:grid-gap:行間距 列間距;
綜合寫法:
grid-template:"分割槽" "分割槽" "分割槽" 分行/分列;
網格整體垂直 水平位置
align-content:;
justify-content:;
start 起始位置
end 結束位置
center 居中
stretch 預設值,專案沒有指定大小,拉伸佔據真個網格大小
space-around 兩端平分
space-between 兩端對齊
space-evenly 平均分配剩餘空間
綜合寫法: place-content:垂直 水平;
指定網格的垂直 水平呈現方式
align-items:;
justify-items:;
start 起始位置
end 結束位置
center 居中
stretch 預設值,專案沒有指定大小,拉伸佔據真個網格大小
綜合寫法: place-items:垂直位置 水平位置;
grid-area:佔區域;注意: 需要分割槽才可以使用
方式一:
grid-area:a1;
方式二:
grid-area:行起點/列起點/行結束/列結束;
grid-column-start:列線開始;
grid-column-end:列線結束;
grid-row-start:行線開始;
grid-row-end:行線結束;
只有end才有span 意思是佔幾個網格 3指佔3個
grid-column-end:span 3;
grid-row-end:span 2;
單個元素在網格的垂直 水平對齊方式
align-self:;
justify-self:;
start 起始位置
end 結束位置
center 居中
stretch 預設值,專案沒有指定大小,拉伸佔據真個網格大小
綜合寫法: place-self:垂直位置 水平位置;
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...