TwoRowGrid

by peterjc

HTML

<div class='container'>    
    <div class='item1'>
        aaaaaaaa
    </div>
    
    <div class='item2'>
      bbbbbbbbbb        
    </div>
 </div>

CSS

html, body {
    padding:0;
    margin:0;
    width: 100%;
    height: 100%;    
}

.container {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr 50px;
    grid-template-columns: 100%;
}

.item1 {
    grid-row-start: 1;
    background: pink;
    color: #444;    
}

.item2 {
    grid-row-start: 2;
    background: yellow;    
}