CSS網格：不工作的網格模板的行

這裏％和經銷商是我的代碼：屏幕CSS網格：不工作的網格模板的行

.container { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows: 20% 20% 20% 20% 20%; 
    grid-column-gap: 40px; 
    grid-row-gap: 10px; 
}

FR = 1的小數部分（萬一有人不知道）

當我爲行設置一個特定的大小，例如200px時，它可以工作！然而，任何響應即20％的東西都不是正確的。

爲什麼不呢？

任何幫助表示讚賞。

來源

2017-08-12 Andrew Wolfe

當使用諸如％，fr等相對單位時，容器的高度和寬度只能達到其父容器的最大高度和最大寬度。不看HTML和CSS的其餘部分，我懷疑你誤解/忘記了關於CSS中親子關係的那一點。如果你願意，每一行佔用屏幕大小的20％，那麼你的容器的高度必須是屏幕的100％。你必須檢查你的容器的高度。您可以通過將容器的高度設置爲100％來測試。如果這不佔用屏幕的100％大小，則容器的父級不是屏幕的100％高度。下面是一些代碼，以確保電網模板行屬性作品，你打算：

html { 
height: 100%; // The height of your html document takes 100% size of window 
} 

body { 
height: 100%; // Body takes 100% height of html which is 100% height of window 
} 

.container { 
    height: 100%; // Container takes 100% height of body which is 100% height of html which is 100% of window 
}

來源

2017-08-14 00:04:17

從MDN：

如果網格容器的大小取決於它的軌道的大小，然後該百分比必須被視爲自動。

和擴大Edmond's answer：你可以給你的.container一個固定高度（含px，%或任何）解決這個問題。

注意：即使沒有指定高度.container，使用fr s仍然可以工作。

來源

2017-09-12 13:10:43 spygi

CSS網格：不工作的網格模板的行

回答

相關問題