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网格：不工作的网格模板的行

回答

相关问题