grid

https://www.jianshu.com/p/21fc2c091b98

概念:

• Grid Container 应用 display: grid 的元素，是为所有 grid items 的父元素
• Grid Items GridContainer 的直接后代 其子元素不属于Grid items
• Grid Line
• Grid Track 轨道(行或列)
• Grid Cell
• Area 若干个Cell

Container属性

• display: grid | inline-grid | subgrid (块级grid | 内联grid | 子grid)

• grid-template-columns 定义列轨道的大小

• grid-template-rows 定义行轨道的大小

• grid-template-area
  none | subgrid | / ;

.a{

 grid-template-areas:
        "header header  header"
        "sidebar main ."
        "footer footer footer"; 
}

• grid-template 前面3个的合写

.a{
grid-template:
[row1_start] "header header header"88px [row1_end]
[row2_start] "sidebar main ."auto [row2_end] 
[row3_start] "footer footer footer"88px [row3_end] 
/250px auto 250px;

/*或者*/
grid-template:
"header header header" 88px 
"sidebar main ." auto
"footer footer footer" 88px 
/250px auto 250px;

}

Item属性