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

Html – Three columns and two rows

I do not know very well how to explain writing what I want, so I have left two photos: The first as I have it now (all in a row) and how I want it to be (edited in Photoshop).

In summary I have those 5 in a row but I would like to be able to put them as in the second picture; that the first occupy 2 columns, out of four, whole of two rows and then the other 4 are distributed 2 and 2 per row.

I don’t think I have explained well, I’m sorry, I hope that with the edited image is better understood.

<section class="section" id="trainers">
        <div class="container"><br><br>
            <div class="row">
                <div class="col">
                    <div class="trainer-item-champion">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/brayWyatt.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <span>RISE World Champion</span>
                            <h4>Bray Wyatt</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="trainer-item-champion">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/juliaHart.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <span>RISE Women's Champion</span>
                            <h4>Julia Hart</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="trainer-item-champion">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/jayBriscoe.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <span>RISE International Champion</span>
                            <h4>Jay Briscoe</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="trainer-item-champion">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/streetProfits.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <span>RISE Tag Team ChampionS</span>
                            <h4>The Street Profits</h4>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="trainer-item-champion">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/streetProfits.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <span>RISE Tag Team ChampionS</span>
                            <h4>The Street Profits</h4>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </section>

    <!-- ***** Roster ***** -->
    <div class="row">
        <div class="col-lg-6 offset-lg-3">
            <div class="section-heading-roster">
                <h2 style="color: white;">EL <em>ROSTER</em></h2>
                <img src="assets/images/line-dec.png" alt="">
            </div>
        </div>
    </div>
    <section class="section" id="trainers">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/adamPage.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Adam Page</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/annaJay.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Anna Jay</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/billieStarkz.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Billie Starkz</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/eddieKingston.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Eddie Kingston</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section" id="trainers">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/giulia.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Giulia</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/jamieHayter.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Jaime Hayter</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/krisStatlander.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Kris Statlander</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/livMorgan.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Liv Morgan</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section" id="trainers">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/luchasaurus.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Luchasaurus</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/orangeCassidy.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Orange Cassidy</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/rickyStarks.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Ricky Starks</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="trainer-item-roster">
                        <div class="image-thumb-roster">
                            <img src="assets/images/wrestlers/samoaJoe.jpg" alt="">
                        </div>
                        <div class="down-content">
                            <h4 style="line-height: 3;">Samoa Joe</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


#trainers { 
  padding-bottom: 30px; 
}

#trainers .trainer-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 15px;
  margin-bottom: 30px;
}

#trainers .trainer-item img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #006B32;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

#trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

#trainers .trainer-item p {
  margin-bottom: 20px;
}

#trainers .trainer-item-champion {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding: 15px;
}

#trainers .trainer-item-roster {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

#trainers .trainer-item-champion img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item-champion span {
  font-size: 13px;
  font-weight: 500;
  color: #006B32;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
}

#trainers .trainer-item-champion h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
}

#trainers .trainer-item-roster img {
  width: 100%;
  border-radius: 5px;
}

#trainers .trainer-item-roster span {
  font-size: 13px;
  font-weight: 500;
  color: #006B32;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
}

#trainers .trainer-item-roster h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
}

how I have it now
how I want it (edited in photoshop)

Tags:

2

Answers


  1. 0

    I’ve created the layout you’re intending to achieve by adding more column and row div's surrounding the content you wish to group. Play with the spacing to match your layout better, but this would be how to format the HTML to get the desired result:

    #trainers {
  padding-bottom: 30px;
}

#trainers .trainer-item {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 30px;
}

#trainers img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

#trainers .trainer-item span {
  font-size: 13px;
  font-weight: 500;
  color: #006B32;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
}

#trainers .trainer-item h4 {
  font-size: 19px;
  font-weight: 600;
  color: #232d39;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}
    <head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <section class="section" id="trainers">
    <div class="container"><br><br>
      <div class="row">
        <div class="col">
          <div class="trainer-item-champion">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <span>RISE World Champion</span>
              <h4>Bray Wyatt</h4>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="row">
            <div class="col">
              <div class="trainer-item-champion">
                <div class="image-thumb-roster">
                  <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
                </div>
                <div class="down-content">
                  <span>RISE Women's Champion</span>
                  <h4>Julia Hart</h4>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="trainer-item-champion">
                <div class="image-thumb-roster">
                  <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
                </div>
                <div class="down-content">
                  <span>RISE International Champion</span>
                  <h4>Jay Briscoe</h4>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="trainer-item-champion">
                <div class="image-thumb-roster">
                  <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
                </div>
                <div class="down-content">
                  <span>RISE Tag Team ChampionS</span>
                  <h4>The Street Profits</h4>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="trainer-item-champion">
                <div class="image-thumb-roster">
                  <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
                </div>
                <div class="down-content">
                  <span>RISE Tag Team ChampionS</span>
                  <h4>The Street Profits</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>

  <!-- ***** Roster ***** -->
  <div class="row">
    <div class="col-lg-6 offset-lg-3">
      <div class="section-heading-roster">
        <h2 style="color: white;">EL <em>ROSTER</em></h2>
        <img src="assets/images/line-dec.png" alt="">
      </div>
    </div>
  </div>
  <section class="section" id="trainers">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Adam Page</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Anna Jay</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Billie Starkz</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Eddie Kingston</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="section" id="trainers">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Giulia</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Jaime Hayter</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Kris Statlander</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Liv Morgan</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="section" id="trainers">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Luchasaurus</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Orange Cassidy</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Ricky Starks</h4>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="trainer-item-roster">
            <div class="image-thumb-roster">
              <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg" alt="">
            </div>
            <div class="down-content">
              <h4 style="line-height: 3;">Samoa Joe</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

    Let me know if you need any further assistance. I’d be happy to help if you’re able to specify further as to what you’re intended outcome would look like.

    Login or Signup to reply.
  2. 0

    you can use the css grid layout. I just did this for one of your section but just do the same for the rest of your sections.

    .section{
    display: grid;
    grid-template-columns: 50% 50%;
}

.one-pic-col{
    display: grid;
    gap: 1vw;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 100%;
    margin-inline: 2vw;
}

.four-pic-col{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    gap: 1vw;
    margin-inline: 2vw;
}


#trainers { 
    padding-bottom: 30px; 
  }
  
  #trainers .trainer-item {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    padding: 15px;
    margin-bottom: 30px;
  }
  
  #trainers .trainer-item img {
    width: 100%;
    border-radius: 5px;
  }
  
  #trainers .trainer-item span {
    font-size: 13px;
    font-weight: 500;
    color: #006B32;
    display: inline-block;
    margin-top: 25px;
    margin-bottom: 10px;
  }
  
  #trainers .trainer-item h4 {
    font-size: 19px;
    font-weight: 600;
    color: #232d39;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
  }
  
  #trainers .trainer-item p {
    margin-bottom: 20px;
  }
  
  #trainers .trainer-item-champion {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    padding: 15px;
  }
  
  #trainers .trainer-item-roster {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  #trainers .trainer-item-champion img {
    width: 100%;
    border-radius: 5px;
  }
  
  #trainers .trainer-item-champion span {
    font-size: 13px;
    font-weight: 500;
    color: #006B32;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  
  #trainers .trainer-item-champion h4 {
    font-size: 19px;
    font-weight: 600;
    color: #232d39;
    letter-spacing: 0.5px;
  }
  
  #trainers .trainer-item-roster img {
    width: 100%;
    border-radius: 5px;
  }
  
  #trainers .trainer-item-roster span {
    font-size: 13px;
    font-weight: 500;
    color: #006B32;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 10px;
  }
  
  #trainers .trainer-item-roster h4 {
    font-size: 19px;
    font-weight: 600;
    color: #232d39;
    letter-spacing: 0.5px;
  }
    <!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="style.css">
    <title>Document</title>
</head>
<body>
    <section class="section" id="trainers">
            <div class="one-pic-col">
                <div class="trainer-item-champion">
                    <div class="image-thumb-roster">
                        <img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
                    </div>
                    <div class="down-content">
                        <span>RISE World Champion</span>
                        <h4>Bray Wyatt</h4>
                    </div>
                </div>
            </div>
            <div class="four-pic-col">
                <div class="trainer-item-champion">
                    <div class="image-thumb-roster">
                        <img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
                    </div>
                    <div class="down-content">
                        <span>RISE Women's Champion</span>
                        <h4>Julia Hart</h4>
                    </div>
                </div>
                <div class="trainer-item-champion">
                    <div class="image-thumb-roster">
                        <img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
                    </div>
                    <div class="down-content">
                        <span>RISE International Champion</span>
                        <h4>Jay Briscoe</h4>
                    </div>
                </div>
                <div class="trainer-item-champion">
                    <div class="image-thumb-roster">
                        <img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
                    </div>
                    <div class="down-content">
                        <span>RISE Tag Team ChampionS</span>
                        <h4>The Street Profits</h4>
                    </div>
                </div>
                <div class="trainer-item-champion">
                    <div class="image-thumb-roster">
                        <img src="https://m.media-amazon.com/images/I/81adh-yG5iL._AC_SL1500_.jpg" alt="">
                    </div>
                    <div class="down-content">
                        <span>RISE Tag Team ChampionS</span>
                        <h4>The Street Profits</h4>
                    </div>
                </div>
            </div>  
    </section>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search