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>

使用带有minmax（<fixed-breadth>，1fr）的重复自动拟合来防止CSS网格列溢出

1 个答案: