*{ margin: 0; padding:0; box-sizing:border-box; font-size:30px; } .grid-container{ height:100vh; border: 10px solid green; display:grid; /* grid-template-areas: "header header header" "nav main ads" "footer footer footer"; grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%; */ grid-template: "header header header" 60px "nav main ads" 1fr "footer footer footer" 60px / 20% 1fr 15% ; } .grid-item{ background-color:rgb(204, 204, 207); border: 4px solid orangered; padding: 20px; } .grid-item1{ grid-area: header; } .grid-item2{ grid-area: nav; } .grid-item3{ grid-area: main; } .grid-item4{ grid-area: ads; } .grid-item5{ grid-area: footer; }