How do I position the grid vertically below the center of the page? There will be a container in the center and I want to place the grid below it.
I tried align, margin, and padding, but the page is pushed down instead of the grid positioning upwards in the page.Need help regarding the positioning of .unitgrid and .maingrid..maingrid needs to be in the center of the page and .unitgrid needs to be a bit below that.
* { margin: 0; font-family: arial; border: border-box; background-color: rgb(225, 241, 253);}.navbar { display: flex; background-color: #f6f8fb; color: #0e0d0d; height: 100px; display: flex; align-items: center; justify-content: space-evenly;}.nav-logo { height: 50px; width: 110px;}.logo { background-image: url("amazon_logo.png"); background-size: cover; background-color: #0e0d0d; height: 50px; width: 100%;}.nav-head { display: flex; justify-content: center; width: 650px; height: 40px; border-radius: 4px; font: 14px;}.panel { height: 40px; display: flex; color: white; background-color: rgb(0, 65, 90); justify-content: space-evenly; align-items: center; background-color: rgb(0, 65, 90);}.panel-all { font-size: 0.9rem; font-weight: 700;}.panel-options a { font-size: 0.9rem; display: inline; margin-left: 10px; text-decoration: none; background-color: rgb(0, 65, 90); color: white;}.sidegrid { width: 160px; height: 499px; background-color: rgb(225, 241, 253); padding-left: 120px; display: grid; grid-template-rows: 49px 49px 49px 49px 49px 49px; grid-template-columns: 49px 49px; row-gap: 38px; column-gap: 32px;}.sidegrid-item { width: 78px; height: 78px; background-color: white; border-radius: 4px;}.unit { height: 100px; width: 490px; margin-left: 440px; 4 background-color: white;}.unitgrid { display: grid; grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px; grid-template-rows: 40px 40px; align-items: center;}.maingrid { display: flex; height: 400px; width: 400px; background-color: white; position: absolute; left: 50%; transform: translate(-50%, 0); top: 50%;}<nav><div class="navbar"><div class="nav-logo border"><div class="logo"></div></div><div class="nav-head "><h1>Kstps</h1></div><div class="nav-toggle"> Hello</div></div></nav><div class="panel"><div class="panel-options"><a href="#">Home</a><a href="#">e-service</a><a href="#">corporate link</a><a href="#">Plant link</a><a href="#">Important links</a><a href="#">Internet links</a><a href="#">About us</a></div></div><div class="sidegrid"><div class="sidegrid-item">1</div><div class="sidegrid-item">2</div><div class="sidegrid-item">3</div><div class="sidegrid-item">4</div><div class="sidegrid-item">5</div><div class="sidegrid-item">6</div><div class="sidegrid-item">7</div><div class="sidegrid-item">8</div><div class="sidegrid-item">9</div><div class="sidegrid-item">10</div><div class="sidegrid-item">11</div><div class="sidegrid-item">12</div><div class="sidegrid-item">13</div><div class="sidegrid-item">14</div></div><div class="maingrid">.</div><div class="unit"><div class="unitgrid"><div class="unitgrid-item-1">1</div><div class="unitgrid-item">2</div><div class="unitgrid-item">3</div><div class="unitgrid-item">4</div><div class="unitgrid-item">5</div><div class="unitgrid-item">6</div><div class="unitgrid-item">7</div><div class="unitgrid-item">8</div><div class="unitgrid-item">9</div><div class="unitgrid-item">10</div><div class="unitgrid-item">11</div><div class="unitgrid-item">12</div><div class="unitgrid-item">13</div><div class="unitgrid-item">14</div><div class="unitgrid-item">15</div><div class="unitgrid-item">16</div><div class="unitgrid-item">17</div><div class="unitgrid-item">18</div></div>enter code here</div>