CSS 网格样式二： display:grid

qq_33974959

于 2023-11-17 10:22:25 发布

阅读量45

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_33974959/article/details/134457032

版权

<div class="grid-content">
  <div class="grid-content-item" v-for="(item,index) in data">
    <div style="width: 100%;height: 100%;background-color: white;border-radius: 8px">
      <el-image :src="item.img" style="width: 100%;height: 188px;border-top-right-radius: 8px;border-top-left-radius: 8px"></el-image>
      
    </div>
  </div>

</div>

CSS：

.grid-content{
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 40px 40px
}

.grid-content-item{
  grid-template-rows: 350px;
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: row;
}

缺点：在firefox 中可能因为浏览器放大，出现样式异常

样式预览： Chrom中样式