http://www.itdecent.cn/p/21fc2c091b98

概念:

• Grid Container 應(yīng)用 display: grid 的元素，是為所有 grid items 的父元素
• Grid Items GridContainer 的直接后代 其子元素不屬于Grid items
• Grid Line
• Grid Track 軌道(行或列)
• Grid Cell
• Area 若干個Cell

Container屬性

• display: grid | inline-grid | subgrid (塊級grid | 內(nèi)聯(lián)grid | 子grid)

• grid-template-columns 定義列軌道的大小

• grid-template-rows 定義行軌道的大小

• grid-template-area
  none | subgrid | <grid-template-rows> / <grid-template-columns>;

.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屬性