Question 391728 in Html Question posted in
Some basic documentation can be found here.

Html – aligning grid container vertically and horizontally

the unitgrid needs to be aligned vertically and horizontally to be just below maingrid.
maingrid is in the center of the page.
the image is attached below to where the unit grid needs to be placed which is under maingrid with a litle bit gap.
I have tried many things but its not aligning correctly
page image

below is the html and css code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="ntpc.css">
    <title>Document</title>
</head>
<body>
    <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>
</div>

</body>
</html>

*{
    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;
}

.unitgrid{
    height:100px;
    width: 600px;
    margin-left: 440px;
    background-color: white;
    left: 50%;
    top: calc(50% + 200px);
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    grid-template-rows: 40px 40px;
    align-items: center;
    justify-content: space-evenly;
    align-content: space-evenly;
}


.maingrid{
    display: flex;
    height: 324px;
    width: 600px;
    background-color: white;
    position: absolute;
    left: 50%;   
    transform: translate(-50%, 0);
    top: 25%;
    
}```



I tried align and justify content, tried adding margin and padding.
Tags:

2

Answers


  1. 0

    Remove fixed margin and positioning from unitgrid. Set justify content center

    .unitgrid{
    height:100px;
    width: 600px;
    background-color: white;
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    grid-template-rows: 40px 40px;
    align-items: center;
    justify-content: center;
}

    Use flexbox in the unit container

    .unit {
    display: flex;
    justify-content: center;
    margin-top: 20px; 
}
    Login or Signup to reply.
  2. 0

    Try this:

    <!-- New wrapper for centering both grids -->
<div class="main-unit-wrapper">
    <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>
    </div>
</div>

    /* New CSS for the wrapper to center both grids */
.main-unit-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px; /* Adjust as necessary to fine-tune vertical spacing */
}

.maingrid {
    display: flex;
    height: 324px;
    width: 600px;
    background-color: white;
    margin-bottom: 20px; /* Adjust as necessary to fine-tune vertical spacing */
}

.unitgrid {
    height: 100px;
    width: 600px;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(9, 40px);
    grid-template-rows: repeat(2, 40px);
    align-items: center;
    justify-content: center;
    gap: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search