Grid布局基础知识点
-
什么grid布局
- 由行和列产生的单元格
-
grid属性分为显式和隐式属性
-
显示网格属性
grid-template-row：定义每一行的行高
grid-template-columns：定义每一列的列宽
grid-template-areas：定义区域由单个或多个单元格组成
单个元素css：grid-area:标签
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关键字
- fr关键字表示倍数(2fr是1fr的2倍)
- repeat(n,v)； n表示次数，v表示单位值，(表示重复的值)
- minmax(min,max);长度范围，有内容是auto
-
间距属性
- grid-row-gap :行间距
- grid-column-gap:列间距
- grid-gap:间距缩写
-
隐式属性
- grid-auto-flow: column/row;先行后列
- grid-auto-rows:隐式指定行的高度
- grid-auto-column:隐式指定列的宽度
-
网格项属性
元素大小
grid-column-start、grid-column-end:根据x网格线指定元素大小
简写grid-column:1/3 ,栅格线(元素+1)
grid-row:2/4; 根据y网格线指定元素大小
span关键字：grid-column: span 3;占位三个元素
所有元素位置
align-items单元格内容的垂直位置
justify-content单元格内容的水平位置
单个元素位置
justify-self单个元素单元格内容的水平位置
align-self单个元素单元格内容的垂直位置
- 兼容性：
IE浏览器不支持
