Grid布局基礎(chǔ)知識(shí)點(diǎn)
-
什么grid布局
- 由行和列產(chǎn)生的單元格
-
grid屬性分為顯式和隱式屬性
-
顯示網(wǎng)格屬性
grid-template-row：定義每一行的行高
grid-template-columns：定義每一列的列寬
grid-template-areas：定義區(qū)域由單個(gè)或多個(gè)單元格組成
單個(gè)元素css：grid-area:標(biāo)簽
grid-template-areas: "header header header header" "aside . main main" "nav . main main" "section section section section" "section section section section" "footer footer footer footer" ;
-
-
行高和列寬單位可以使用px颜说，百分比 ，fr關(guān)鍵字
- fr關(guān)鍵字表示倍數(shù)(2fr是1fr的2倍)
- repeat(n,v)撰筷； n表示次數(shù)，v表示單位值干像，(表示重復(fù)的值)
- minmax(min,max);長度范圍锹引，有內(nèi)容是auto
-
間距屬性
- grid-row-gap :行間距
- grid-column-gap:列間距
- grid-gap:間距縮寫
-
隱式屬性
- grid-auto-flow: column/row;先行后列
- grid-auto-rows:隱式指定行的高度
- grid-auto-column:隱式指定列的寬度
-
網(wǎng)格項(xiàng)屬性
元素大小
grid-column-start厂财、grid-column-end:根據(jù)x網(wǎng)格線指定元素大小
簡寫grid-column:1/3 ,柵格線(元素+1)
grid-row:2/4; 根據(jù)y網(wǎng)格線指定元素大小
span關(guān)鍵字：grid-column: span 3;占位三個(gè)元素
所有元素位置
align-items單元格內(nèi)容的垂直位置
justify-content單元格內(nèi)容的水平位置
單個(gè)元素位置
justify-self單個(gè)元素單元格內(nèi)容的水平位置
align-self單個(gè)元素單元格內(nèi)容的垂直位置
- 兼容性：
? IE瀏覽器不支持
