Question

我正在制作一个网格布局，该布局将根据页面的宽度调整各种项目（正方形）的大小，并将不适合同一行的项目包装到下一行。

我尝试了很多方法，例如使用vw和删除minmax，但是似乎没有任何方法可以得到我想要的结果。这是当前的代码：

css：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.grid-item {
  background-image: url('../mood.jpg'); /*square image*/
  background-repeat: no-repeat;
  background-size: contain;
  align-content: center;
  color: black;
  height: 8rem;
}

html：

<div class="grid-container">
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
    </div>

现在它在图像的右边有一些额外的空间，我希望高度可以缩放以适合该额外的空间。

编辑：Here's a pen可以更彻底地显示问题。网格项不是正方形，而是矩形，我希望它们是正方形。

Answer 1

将height: 8rem更改为padding: 100%。

使用网格项目宽度缩放网格项目高度

1 个答案: