css 使用网格重复自动调整的页面溢出

apeeds0o 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(131)

我有一个自动适应的网格。它的工作很好，但在较小的屏幕（〈350），它溢出。如何解决这个问题？基本上有350只要有可能，否则收缩。

.grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1rem;
      }
      .item {
        background-color: crimson;
        height: 200px;
        border-radius: 2rem;
      }

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

css

来源：https://stackoverflow.com/questions/74985522/page-overflowing-with-gird-repeat-auto-fit

2条答案

按热度按时间

rdlzhqv91#

这应该可以实现您的期望：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: 1rem;
}

您的最小宽度没有响应，所以我通过使用min()在minmax中添加100%值来修复它。

赞(0）回复(0）举报 2023-01-03

lyfkaqu12#

您可以在minmax()中嵌套另一个属性，例如min()：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 1rem;
}

.item {
  background-color: crimson;
  height: 200px;
  border-radius: 2rem;
}

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

赞(0）回复(0）举报 2023-01-03

我来回答

css 使用网格重复自动调整的页面溢出

2条答案

相关问题

热门标签

最新问答