grid

文章目录

1. 1. display
2. 2. grid-template-rows & columns
3. 3. grid-template-areas
4. 4. grid-column-gap, grid-row-gap
5. 5. justify-items
6. 6. align-items
7. 7. justify-content
8. 8. align-content
9. 9. item/child的css

兼容性 92%

• IE 10 partial
• Android 5
• not qq browser

兜兜转转又回到了table布局【参考资料】

display

• grid
• inline-grid: 行内grid元素
• subgrid: 继承相关 (lv2 working draf)

grid-template-rows & columns

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

grid-template-areas

.item-a{ grid-area: header; }  
.item-b{ grid-area: main; }  
.item-c{ grid-area: sidebar; }  
.item-d{ grid-area: footer; }  

.container{    
  width: 300px;
  height:200px;   
  display:grid;   
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"   
    "main    main    .    sidebar"   
    "header footer header footer";
}

grid-column-gap, grid-row-gap

justify-items

align-items

justify-content

align-content

item/child的css

• grid-area
• justify-self
• align-self
• grid-column
• grid-row

.item-a{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}  

.item-b{
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

.container {
  grid-auto-columns: 60px;
}