grid弹性布局 设置宽高一致

效果图如下：

例子：设置每行四列的弹性布局，每个盒子宽高相同，间距为10px

.left_list{
      display: grid;
      grid-gap: 10px 10px;
      grid-template-columns: repeat(4,1fr);
      .list_item{
        height: 0;
        padding-bottom:100%;/*高度设置为0，使用内间距100%，将匡高设置为一致*/
        position: relative;
      }
      img{
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;/*预览图片的缩略图最好基于正中心显示*/
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16