小程序Grid网格布局记录

小程序Grid网格布局记录

    1
    2
    3
    4
    5
    6
    7
    8
    9

 

css

.grid-container {
  display:grid; /**声明**/
  grid-template-columns: 1fr 2fr 1fr 1fr; /**列数**/
  grid-gap: 10rpx; /**间隔**/
  height: 100vh;
}
.grid-item {
 background: skyblue;
}

.item1, .item8, .item9 {
 grid-column: 1 / 5; /**行：起始位置 / 结束位置**/
}

.item2{
 grid-column: 1 / 2;
 grid-row: 2 / 4; /**列：起始位置 / 结束位置**/
}

.item7 {
 grid-column: 4 / 5;
 grid-row: 2 / 4;
}