body{ display: flex; } .container { display:grid; height: 100vh; width: 90%; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-gap: 0.3rem; margin: 5vh; grid-template-areas: "nav nav nav nav" "Item-2 Item-4 Item-4 Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 main Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-6 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-7 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 Item-10 Item-8 Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" "Item-2 footer footer Item-3" } nav { background-color: red; grid-area:nav; width: 85%; } main { background-color: orange; grid-area: main; } #Item-2 { background-color: yellow; grid-area:Item-2; } #Item-3 { background-color: green; grid-area:Item-3; width: 40%; } #Item-4 { background-color: blue; grid-area:Item-4 } #Item-6 { background-color: purple; grid-area:Item-6; } #Item-7 { background-color: pink; grid-area: Item-7; } #Item-8 { background-color: brown; grid-area:Item-8; } #Item-10 { background-color: black; grid-area:Item-10; } footer { background-color: silver; grid-area: footer; }