html - minmax 行为，灵活的 CSS 网格

问题描述

目前，使用 grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

行为如下：如果行中的项目数超过（基于最小值），则创建新行。如果项目少于该行可以容纳的项目，则项目扩展以填充剩余空间。

但是，如果您不希望它们填充空间，但有最大尺寸怎么办？设置项目的最大宽度可以解决问题，但随后会将项目分散到整个容器中。如果网格比项目总数宽，我希望项目具有最大尺寸并且彼此相邻，而不是填充空间或在容器中隔开。

这种行为可能吗？

显示网格 > 项目总数的片段

html {
  font-size: 62.5%;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-template-rows: repeat(2, 20rem);
  grid-gap: 1rem;
  
  border: 1px solid lightgrey;
  padding: 1rem;
}

.item {
  background: lightblue;
  // max-width: 35rem;  
}

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

标签： htmlcsscss-grid

您应该使用auto-fill而不是auto-fit. 不同之处在于auto-fill用尽可能多的列填充行，并auto-fit扩展列以适应可用空间。

我用一个解决方案创建了这个jsfiddle 。

grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));

html - minmax 行为，灵活的 CSS 网格

问题描述

解决方案

推荐阅读