限制內容擴展的網格項

Question

TL;DR: 是否有類似table-layout: fixed的CSS網格佈局的屬性？

---

我試圖創建一個年視圖的日曆，其中有一個4x3的大網格用於月份，內部嵌套的是7x6的網格用於日期。

日曆應該要填滿整個頁面，所以年份網格容器的寬度和高度都設定為100%。

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

這是一個可運作的範例：https://codepen.io/loilo/full/ryXLpO/

為了簡單起見，該範例中的每個月份都有31天，並且從星期一開始。

我還選擇了一個非常小的字體大小來示範問題：

網格項目（即日期單元格）非常緊湊，因為頁面上有數百個日期單元格。而且一旦日期標籤變得太大（請隨意使用左上角的按鈕在範例中調整字體大小），網格就會增加並超出頁面的邊界。

有沒有辦法阻止這種行為？

我最初將年份網格的寬度和高度設定為100%，所以這可能是開始的地方，但我找不到任何與網格相關的CSS屬性來滿足這個需求。

免責聲明：我知道有很簡單的方法來樣式化這個日曆，而不是使用CSS Grid佈局。然而，這個問題更多關於對該主題的一般知識，而不是解決具體的例子。

Answer 1

之前的答案非常好，但我還想提到，對於網格來說，也有一種固定佈局的等效方法，你只需要將你的軌道大小寫為minmax(0, 1fr )而不是1fr。

Answer 2

預設情況下，網格項目的大小不能小於其內容的大小。

網格項目的初始大小為min-width: auto和min-height: auto。

您可以透過將網格項目設定為min-width: 0，min-height: 0或overflow（除visible之外的任何值）來覆寫此行為。

來自規範：

#

這是一個更詳細的解釋，涵蓋了彈性項，但也適用於網格項：

• 為什麼彈性項不能縮小到內容大小以下？

#這篇文章也涵蓋了嵌套容器的潛在問題和主要瀏覽器之間的已知渲染差異。

---

要修復您的佈局，請對您的程式碼進行以下調整：

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* 新增 */
  min-width: 0;   /* 新增；Firefox需要 */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* 新增 */
  min-width: 0;      /* 新增；Firefox需要 */
}

jsFiddle示範

---

#1fr與minmax(0, 1fr)

#上面的解決方案是在網格項目層級上操作的。有關容器層級的解決方案，請參閱以下文章：

• 為什麼對於長元素，minmax(0, 1fr)有效而1fr無效？