How to arrange multiple rows?-CodePudding

I’m currently learning about HTML and CSS grids. So far I have created two blocks with different color and items with content within. However I haven’t figure out how to organize the elements in two rows. I’m planning to add interactive animations for every grid item. So it would be useful to make a better use of the screen space.

Here is the code I’m currently using:

  <!DOCTYPE html>
    <html>
    <head>  

        <style>
            .flex-container {
              display: flex;
              background-color: darkslategrey;
              padding: 10px;
              grid-auto-columns: auto;
              grid-auto-rows: auto;
              
            }

            div  {
                display: block;
                width: 300px;
                border: 15px ;
                padding: 50px;
                margin: 20px;
                background-color: sandybrown;
                }
            
            .flex-container > div {
              background-color: #f1f1f1;
              margin: 10px;
              padding: 20px;
              font-size: 30px;
              grid-template-columns: 200px;
            }

            

            .grid-item  {
                
                border: 4px solid black;
                width: 120px;
                height: 50px;
                padding: 20px;
                font-size: 30px;
                text-align: center;

                
                        }
            </style>
            </head>
            <body>
            
            <h1>&nbsp;&nbsp; Game</h1>

            <div class="table">
                <h2>Test element</h2>
            </div>
            
            <section class="flex-container">
              <div class="grid-item">1</div>
              <div class="grid-item">2</div>
              <div class="grid-item">3</div>
              <div class="grid-item">4</div>
              <div class="grid-item">5</div>
              <div class="grid-item">6</div>
              <div class="grid-item">7</div>
              <div class="grid-item">8</div>
              <div class="grid-item">9</div>
               
            </section>
            
           </body>

Thanks in advance

CodePudding user response：

Do you want it to be in two rows exactly?

Otherwise you can use property: flex-wrap: wrap. This makes the items go to the next line when there is no more space in the current line.

CodePudding user response：

You can nest separate flexboxes within the large one to organize into rows. The biggest one (A here) will use flex-display: row; to make the rows. The 2nd biggest (B here) will use flex-display: column; to organize the grid-items in each row. Add your grid-items to the B flexbox and organize their order in the html with divs like you already are.

.flexboxA{
  display: flex;
  flex-direction: row;
}

.flexboxB{
  display: flex;
  flex-direction: column;
}

.grid-item{
  border: 4px solid black;
  width: 120px;
  height: 50px;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}