时间戳

首页 > 解决方案 > 如何让具有自动调整功能的 CSS Grid 的最后一列缩小到 minmax 的最小值以下？

css - 如何让具有自动调整功能的 CSS Grid 的最后一列缩小到 minmax 的最小值以下？

问题描述

我正在使用以下 CSS 网格布局：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

这会尝试尽可能多地容纳 500px 列，然后在列之间平均分配剩余空间。

问题是，当只剩下一列时（网格宽度 < 1000px），该列将缩小直到达到 500px，并且不会缩小超过该值，即使网格变小，也会导致列溢出。

我尝试了很多组合，包括嵌套 minmax 函数，但无法解决这个问题。

标签： csscss-grid

解决方案

您可以考虑max-width使用vw单元来处理您的元素。只需注意 maring/padding/border 即可识别正确的值。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.grid>span {
  border: 2px solid red;
  height: 50px;
  max-width:100vw;
  box-sizing:border-box;
}

body {
 margin:0;
}
<div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

推荐阅读