允许 CSS 网格列比网格间距短以防止溢出

Question

我正在开发我的 grid system，它允许每行最多 16 列，并且每列之间有 1rem 个间隙。

如果每列的宽度为 4 (4 x 4 = 16)，则可以连续 4 列。

而且每行只能有一个列，如果每列的宽度为 16。

问题

当我缩小网格时，列会溢出。

列可以缩小，但不能小于网格间距。

1rem (Gap) * 16 (Columns per row) = 16rem

因此网格不能短于16rem。

※ 黑边表示Grid容器

因为 Flexbox 没有发生，我想知道是否有任何样式允许列比 Grid Gap 短，所以我的 Grid 可以比 16rem 短？

代码

网格

.ts-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, minmax(0, 1fr));
}

列

.ts-grid .column {
    grid-column: auto / span 1;
}

Answer 1

当容器较小时，在间隙上使用min()来减小间隙：

.grid {
  display: grid;
  gap: min(1rem, 5%);
  grid-template-columns: repeat(16, minmax(0, 1fr));
  border:1px solid;
}

.grid>div {
  height:50px;
  background:red;
}
.grid > div:only-child {
  grid-column: span 16;
}

<div class="grid">
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

允许 CSS 网格列比网格间距短以防止溢出

Allows CSS Grid columns to be shorter than the Grid Gap to prevent overflow

css

css-grid

问题

代码