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

Html – How do I move the top 3 rows 3 squares ONLY to the right?

There are 38 squares in this code. I’m trying to move the 3 rows on the top to the right 3 squares.

I tried various ways, but it doesn’t work. How do I move these 3 rows on the top to the right 3 squares, so that it is aligned in the center?

If you look at the output, the top 3 rows (8 X 3 = 24 squares) are simply on the left side. I’m trying to align it to the middle. The bottom row which is row4 contains 14 squares in total. I’m trying to align the top 3 rows between square 4 and 11 of row4 (the row at the bottom).

<body>

    <div class="container">


        <ul>
            <div class="div" id="row1">
                <li class="square" id="D14"></li>
                <li class="square" id="E14"></li>
                <li class="square" id="F14"></li>
                <li class="square" id="G14"></li>
                <li class="square" id="H14"></li>
                <li class="square" id="I14"></li>
                <li class="square" id="J14"></li>
                <li class="square" id="K14"></li>
            </div>
    
            <div class="div" id="row2">
                <li class="square" id="D13"></li>
                <li class="square" id="E13"></li>
                <li class="square" id="F13"></li>
                <li class="square" id="G13"></li>
                <li class="square" id="H13"></li>
                <li class="square" id="I13"></li>
                <li class="square" id="J13"></li>
                <li class="square" id="K13"></li>
            </div>
    
            <div class="div" id="row3">
                <li class="square" id="D12"></li>
                <li class="square" id="E12"></li>
                <li class="square" id="F12"></li>
                <li class="square" id="G12"></li>
                <li class="square" id="H12"></li>
                <li class="square" id="I12"></li>
                <li class="square" id="J12"></li>
                <li class="square" id="K12"></li>
            </div>
    
            <div class="div" id="row4">
                <li class="square" id="A11"></li>
                <li class="square" id="B11"></li>
                <li class="square" id="C11"></li>
                <li class="square" id="D11"></li>
                <li class="square" id="E11"></li>
                <li class="square" id="F11"></li>
                <li class="square" id="G11"></li>
                <li class="square" id="H11"></li>
                <li class="square" id="I11"></li>
                <li class="square" id="J11"></li>
                <li class="square" id="K11"></li>
                <li class="square" id="L11"></li>
                <li class="square" id="M11"></li>
                <li class="square" id="N11"></li>
            </div>
        </ul>


      </div>

</body>

*{
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    place-items: center;
    justify-content: center;
    overflow-x: hidden;
    height: 100vh;
    background-color: #c0c0c0;
}

.container{
    display: grid;
    place-items: center;
    justify-content: center;
}

.div{
    display: flex;
}

ul{
    display: grid;
    grid-template-columns: 1fr;
}

li{
    list-style: none;
    display:grid;
    place-items: center;
    font-size: 0;
}

.square{
    margin:.5px;
    width: 60px;
    height: 60px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);

}
Tags:

2

Answers


  1. 0

    I think I got your problem. Following is the new code you should use along with suggestions.

    1. replace li with div and ul with div so that your code is inline with the conventions of programming

    2. add a justify-content:center in the .div class.

    here’s the code:

    <body>

    <div class="container">


        <div id="cont">
            <div class="div" id="row1">
                <div class="square" id="D14"></div>
                <div class="square" id="E14"></div>
                <div class="square" id="F14"></div>
                <div class="square" id="G14"></div>
                <div class="square" id="H14"></div>
                <div class="square" id="I14"></div>
                <div class="square" id="J14"></div>
                <div class="square" id="K14"></div>
            </div>
    
            <div class="div" id="row2">
                <div class="square" id="D13"></div>
                <div class="square" id="E13"></div>
                <div class="square" id="F13"></div>
                <div class="square" id="G13"></div>
                <div class="square" id="H13"></div>
                <div class="square" id="I13"></div>
                <div class="square" id="J13"></div>
                <div class="square" id="K13"></div>
            </div>
    
            <div class="div" id="row3">
                <div class="square" id="D12"></div>
                <div class="square" id="E12"></div>
                <div class="square" id="F12"></div>
                <div class="square" id="G12"></div>
                <div class="square" id="H12"></div>
                <div class="square" id="I12"></div>
                <div class="square" id="J12"></div>
                <div class="square" id="K12"></div>
            </div>
    
            <div class="div" id="row4">
                <div class="square" id="A11"></div>
                <div class="square" id="B11"></div>
                <div class="square" id="C11"></div>
                <div class="square" id="D11"></div>
                <div class="square" id="E11"></div>
                <div class="square" id="F11"></div>
                <div class="square" id="G11"></div>
                <div class="square" id="H11"></div>
                <div class="square" id="I11"></div>
                <div class="square" id="J11"></div>
                <div class="square" id="K11"></div>
                <div class="square" id="L11"></div>
                <div class="square" id="M11"></div>
                <div class="square" id="N11"></div>
            </div>
        </div>


      </div>

</body>

    CSS:

    *{
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    place-items: center;
    justify-content: center;
    overflow-x: hidden;
    height: 100vh;
    background-color: #c0c0c0;
}

.container{
    display: grid;
    place-items: center;
    justify-content: center;
}

.div{
    display: flex;
    justify-content: center; /*Add this line*/
}

#cont{
    display: grid;
    grid-template-columns: 1fr;
}

.square{
    margin:.5px;
    width: 60px;
    height: 60px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
    list-style: none;
    display:grid;
    place-items: center;
    font-size: 0;

}

    This will solve your problem.

    Login or Signup to reply.
  2. 0

    Don’t get rid of the ul element if the blocks really do constitute a list – keep the semantics.

    Instead, to correct the HTML syntax, remove those divs within the ul.

    Then format the ul as a grid, 14 cells wide, with the 1st, 9th and 17th item in column 4. All the other cells with then go to the desired places.

    <style>
  * {
    margin: 0;
    padding: 0;
  }
  
  body {
    display: flex;
    place-items: center;
    justify-content: center;
    overflow-x: hidden;
    height: 100vh;
    background-color: #c0c0c0;
  }
  
  .container {
    display: grid;
    place-items: center;
    justify-content: center;
  }
  
  ul {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
  }
  
  li {
    list-style: none;
    display: grid;
    place-items: center;
    font-size: 0;
  }
  
  li:nth-child(1),
  li:nth-child(9),
  li:nth-child(17) {
    grid-column: 4;
  }
  
  li:nth-child(25) {
    grid-column: 1;
  }
  
  .square {
    margin: .5px;
    width: 60px;
    height: 60px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
  }
</style>

<body>

  <div class="container">


    <ul>

      <li class="square" id="D14"></li>
      <li class="square" id="E14"></li>
      <li class="square" id="F14"></li>
      <li class="square" id="G14"></li>
      <li class="square" id="H14"></li>
      <li class="square" id="I14"></li>
      <li class="square" id="J14"></li>
      <li class="square" id="K14"></li>

      <li class="square" id="D13"></li>
      <li class="square" id="E13"></li>
      <li class="square" id="F13"></li>
      <li class="square" id="G13"></li>
      <li class="square" id="H13"></li>
      <li class="square" id="I13"></li>
      <li class="square" id="J13"></li>
      <li class="square" id="K13"></li>

      <li class="square" id="D12"></li>
      <li class="square" id="E12"></li>
      <li class="square" id="F12"></li>
      <li class="square" id="G12"></li>
      <li class="square" id="H12"></li>
      <li class="square" id="I12"></li>
      <li class="square" id="J12"></li>
      <li class="square" id="K12"></li>

      <li class="square" id="A11"></li>
      <li class="square" id="B11"></li>
      <li class="square" id="C11"></li>
      <li class="square" id="D11"></li>
      <li class="square" id="E11"></li>
      <li class="square" id="F11"></li>
      <li class="square" id="G11"></li>
      <li class="square" id="H11"></li>
      <li class="square" id="I11"></li>
      <li class="square" id="J11"></li>
      <li class="square" id="K11"></li>
      <li class="square" id="L11"></li>
      <li class="square" id="M11"></li>
      <li class="square" id="N11"></li>
    </ul>

  </div>

</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search