使用間隙時如何防止 CSS 網格爆裂？

Question

考慮這個簡單的布局：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container{
  display: grid;
  grid-template-columns: repeat(100, minmax(0, 1fr));
  gap: 0;
  max-width: 100px;
}

.box {
  height: 100px;
  min-width: 0px;
  grid-column: span 30;
}

結果是你所期望的。 在一個 100px 寬的容器內有兩個 30px 寬的子元素。

如果你再改變gap: 0; 到gap: 2px; ，布局做了一些意想不到的事情。 網格子項變得比他們應該的要寬得多，並且從容器元素中吹出。

一個奇怪的細節是gap:1px; 也可以正常工作。 只有間隙 > 1px 會導致問題。

這是一個演示：

 .container { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); gap: 0; max-width: 100px; margin-bottom: 20px; padding: 5px; background-color: LightGrey; }.container1 { gap: 0px; }.container2 { gap: 1px; }.container3 { gap: 2px; }.box { height: 100px; min-width: 0px; grid-column: span 30; }.box1 { background-color: DarkBlue; }.box2 { background-color: CornflowerBlue; }

 No gap, no problems <div class="container container1"> <div class="box box1"></div> <div class="box box2"></div> </div> 1px gap, still good <div class="container container2"> <div class="box box1"></div> <div class="box box2"></div> </div> 2px gap, ???! <div class="container container3"> <div class="box box1"></div> <div class="box box2"></div> </div>

有沒有人對這種奇怪的行為有解釋，甚至更好的方法來防止它？ 謝謝！

編輯：感謝@Jhecht，我找到了一個很好的解決方案。 在下面發布為答案。

Answer 1

我收到了您的查詢，您提到了grid-template-columns: repeat(100, minmax(0, 1fr));

問題是 2px 間隙 * 100 列 = 200px，大於容器的最大寬度。 這就是為什么我們可以看到在 container3 中發生了溢出。 對於它的解決方案：

要么你可以讓列重復一些小的不喜歡

• grid-template-columns: repeat(5, minmax(0, 1fr));

  和內箱

• grid-column: span 1; .

或者你可以改變差距，如：

• gap: min(2px, 1%);

這樣就可以得到預期的output。

這是第一個場景的工作演示：

 .container{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; max-width: 100px; margin-bottom: 20px; padding: 5px; background-color: LightGrey; }.container1{ gap: 0px; }.container2{ gap: 1px; }.container3{ gap: 2px; }.box { height: 100px; min-width: 0px; grid-column: span 1; }.box1 { background-color: DarkBlue; }.box2 { background-color: CornflowerBlue; }

 No gap, no problems <div class="container container1"> <div class="box box1"></div> <div class="box box2"></div> </div> 1px gap, still good <div class="container container2"> <div class="box box1"></div> <div class="box box2"></div> </div> 2px gap, ???! <div class="container container3"> <div class="box box1"></div> <div class="box box2"></div> </div>

Answer 2

感謝@Jhecht 的評論，我為我的案例找到了一個很好的答案。

這里的問題是 2px 間隙 * 100 列 = 200px，大於容器的最大寬度。 在給定 100 列網格的情況下，我需要一個靈活的解決方案來處理任意容器寬度和間隙大小。

答案是現代 CSS: gap: min(2px, 1%);

如果容器足夠寬，將應用像素值。 否則將應用 1% 的間隙，這是 100 列的最大間隙。

這是一個工作演示：

 .container { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); gap: min(2px, 1%); max-width: 100px; margin-bottom: 20px; padding: 5px; background-color: LightGrey; }.box { height: 100px; min-width: 0px; grid-column: span 30; }.box1 { background-color: DarkBlue; }.box2 { background-color: CornflowerBlue; }

 <div class="container"> <div class="box box1"></div> <div class="box box2"></div> </div>

Answer 3

在 Container 中，您在 box grid-column: span 30; 中提到 repeat(100, minmax(0, 1fr))

把它改成

.container{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    max-width: 100px;
    margin-bottom: 20px;
    padding: 5px;
    background-color: LightGrey;
}
.box {
    height: 100px;
    min-width: 0px;
    /* grid-column: span 30; */ remove this line
}