Grid布局基础知识点

1. 什么grid布局

   • 由行和列产生的单元格

2. 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单个元素单元格内容的垂直位置

3. 兼容性：

​ IE浏览器不支持