防止內容展開網格項有什么像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網格布局的情況下，可以很容易地對日歷進行樣式化。然而，這個問題更多的是關于這個問題的一般知識，而不是解決具體的例子。
2 回答
慕森王
TA貢獻1777條經驗 獲得超3個贊
min-width: automin-height: auto.
min-width: 0, min-height: 0overflowvisible.
從規范中：
為了為網格項提供更合理的默認最小大小，此規范定義 auto價值 min-width/min-height還將指定軸中的自動最小大小應用于其 overflow是 visible..(其效果類似于對FLEX項目施加的自動最小大小。)
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */}.day-item {
padding: 10px;
background: #DFE7E7;
overflow: hidden; /* NEW */
min-width: 0; /* NEW; needed for Firefox */}1frVS minmax(0, 1fr)
- 2 回答
- 0 關注
- 489 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消