html - 使用带有 minmax(, 1fr) 的重复自动调整防止 CSS 网格列溢出

Question

在使用 repeat(auto-fit, minmax(<fixed-breadth>, 1fr)) 时，有什么方法可以防止列大于网格宽度吗？ ？

我希望有一个解决方案可以避免媒体查询，从而使组件更易于重用。网格中的每个元素都应始终保持最大，因此 1fr需要保留为第二个参数。

在下面的例子中，有一个约束网格和一个自由网格。受限网格有最大宽度限制，列大于最大宽度。

红色背景表示列宽。绿色背景显示网格宽度。

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

  margin-bottom: 1em;

  padding-top: 1em;
  background-color: green;
}

.item {
  background-color: red;
  border: black solid 1px;
}

.grid.smaller {
  width: 100px;
}

Free grid:
<div class="grid">
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>        
</div>

Constrained grid:
<div class="grid smaller">
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>        
</div>

Answer 1

希望对您有所帮助。

:root {
  --width: 250px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
  margin-bottom: 1em;
  padding-top: 1em;
  background-color: green;
}

.item {
  background-color: red;
  border: black solid 1px;
}

.grid.smaller {
  width: 100px;
  --width: 100px;
}

Free grid:
<div class="grid">
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
</div>

Constrained grid:
<div class="grid smaller">
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
</div>