css 网格仅显示一列而不是重复 (5, 120px)答案

【问题标题】：css grid showing only one column instead of repeat(5, 120px)css 网格仅显示一列而不是重复 (5, 120px)
【发布时间】：2021-05-15 05:47:16
【问题描述】：

我有一个 CSS 网格，我用它来显示像画廊一样的图像。这是html部分。

  <template>
    <div class="images-grid">
      <div v-for="image of images" :key='image.src' class="img-container">
        <img :src="image.src">
      </div>
    </div>
  </template>

和css，

  .images-grid{
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 120px);
    padding-top: 103px;
    padding-left: 3px;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    opacity: 0;
    overflow: auto;
  }

  .img-container{
    width: 120px;
    height: 120px;
    background-color: aqua;
  }

  .img-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

网格仅显示一列，例如而不是 5。我尝试使用 inline-block 但我超过了 5 列。我在这里做错什么了吗？还是 vue css 的工作方式不同，因为我是 Vue 新手。

【问题讨论】：

这似乎是您的 CSS 文件的加载问题
如何解决它然后有什么想法？
我认为它不是 css 加载问题.....它是别的东西
分享生成的代码而不是模板一个
尝试摆脱你的transform-style 看看

标签： css vue.js css-grid

【解决方案1】：

我发现了问题所在......

我使用 gsap 为元素设置动画。

所以 gsap 将显示更改为块然后动画。这件事导致我的网格变成块:')

哈哈，我已经花了 45 分钟左右的时间。

感谢 Temani。

【讨论】：