grid layout

.wrapper {
  display: grid;　　　　　　　　/*wrapper的显示按照grid的属性 */ grid-template-columns: repeat(3, 1fr);　　　　/*grid-template-columns 为属性定义，定义网格 repeat为重复，其中第一个参数代表重复次数 fr为按照容器宽度计算后的基本单位*/ grid-gap: 10px;　　　　　　　　　　　　　　　　　　　/*设置网格间隔10像素*/ grid-auto-rows: minmax(100px, auto);　　　　　　　 } .one { grid-column: 1 / 3; /*定义one占据范围为左到距右边界三分之一处*/ grid-row: 1;　　　　　　　　　　　/*定义长度为默认长度*/ } .two { grid-column: 2 / 4;　　　　　　/*定义two占据左半边*/ grid-row: 1 / 3;　　　　　　　　/*定义其长度为默认两倍*/ } .three { grid-column: 1;　　　　　　/*定义其长度为下一个网格的一倍*/ grid-row: 2 / 5;　　　　　　/*定义长度为下一网格的5/2倍*/ } .four { grid-column: 3;　　　　　　　　/*定义长度为该网格的第几部分*/ grid-row: 3;　　　　　　　　　　/*定义其起始位置为第三列*/ } .five { grid-column: 2;　　　　　　　　　　/*定义起始位置为第二列*/ grid-row: 4;　　　　　　　　　　　　/*定义起始位置为第四根网格线*/ } .six { grid-column: 3;　　　　　　　　　　　　/*定义起始位置为第三网格线*/ grid-row: 4;　　　　　　　　　　　　　　　/*定义起始位置为第四网格线*/ }

转载于:https://www.cnblogs.com/wusifan/p/9754281.html