grid弹性布局 设置宽高一致

效果图如下:
grid弹性布局 设置宽高一致_第1张图片
例子:设置每行四列的弹性布局,每个盒子宽高相同,间距为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;/*预览图片的缩略图最好基于正中心显示*/
      }
    }

你可能感兴趣的:(css)