Значение строк шаблона CSS Grid не изменяется

Question

У меня проблема с CSS Grid (я только начал изучать его). Когда я набираю значения моего grid-template-rows: в em, он отлично работает. Но если я использую процент, все строки имеют одинаковую высоту. Раньше я давал им: 10%, 80%, 10% для: header, main, footer,, но по какой-то причине они все такие же большие. Не имеет значения, если я изменю высоту Обертки (элемент контейнера сетки) с% на em или что-то еще. Вот мой код:

  
    #Wrapper {
    	display: grid;
    	grid-template-columns: 20% 60% 20%;
    	grid-template-rows: 10% 80% 10%;
    	min-height: 20em;
    	grid-template-areas:
    		"header header header"
    		"main main main"
    		"footer footer footer"
    		
    }
    
    header {
    	background-color: #593093;
    	grid-area: header;
    
    }
    
    main {
    	background-color: #2AABBB;
    	grid-area: main;
    
    }
    
    footer {
    	background-color: #2F6692;
    	grid-area: footer;
    
    }
    
    
    h3 {
    	margin: 0;
    }

    	<div id="Wrapper">
    		<header>
    			<h3>Header</h3>
    
    		</header>
    		<main>
    			<h3>Main</h3>
    		</main>
    		<footer>
    			<h3>Footer</h3>
    
    		</footer>
    	</div>

    
    
  

Answer 1

Это потому, что у вашего #Wrapper нет указанной высоты или родительской высоты. Вы не можете использовать % в качестве единицы, если высота родителя не указана. Высота в em работает, поскольку em является абсолютной единицей относительно родителя px.

Определите высоту #Wrapper, будет хорошо идти.

#Wrapper{
  height: 500px;
}

https://codepen.io/anon/pen/KrMwQM