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

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>

标签： htmlcss

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>