How to align a specific row in the grid layout system

Question

I have a section containing 1 parent div and 5 child div elements. I arranged these 5 elements using the grid layout system, but I want to align the second row in the center of the viewport. How do I do that.

This is my code:

/* Working Section */

#Working {
  background-color: #fefefe;
  height: 100%;
}

#Working img {
  width: 254px;
  height: 225px;
}

#Working .wrapped_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  align-items: flex-end;
}

#Working .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
}

<section id="Working">
  <h1>How it Works?</h1>
  <div class="wrapped_container">
    <div class="book_session container">
      <img src="images/book-img/pic1.png">
      <h2>Book a Session</h2>
    </div>

    <div class="impression container">
      <img src="images/book-img/pic2.png">
      <h2>Impression at home</h2>
    </div>

    <div class="virtual_smile container">
      <img src="images/book-img/pic3.png">
      <h2>Get a Virtual Smile</h2>
    </div>

    <div class="delivery container">
      <img src="images/book-img/pic4.png">
      <h2>Veneers Delivered</h2>
    </div>

    <div class="stay_in_touch container">
      <img src="images/book-img/pic5.png">
      <h2>Stay in Touch</h2>
    </div>
  </div>
</section>

Answer 1

This is a common problem with grid that doesn't have any easy and straightforward solution. Seeing as your layout is a simple one-dimensional layout, you can use flex and flex-wrap to achieve what you want instead of grid.

justify-content: center will center the content on the second row. max-width: 33.33% and/or flex-basis: 33% will make it a 3-column layout.

/* Working Section */

#Working {
  background-color: #fefefe;
  height: 100%;
}

#Working img {
  /* removing fixed size values for demo
  width: 254px;
  height: 225px; */
  max-width: 100%;
  height: auto;
}

#Working .wrapped_container {
  /*display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  align-items: flex-end;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#Working .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  flex-basis: 33.33%;
  max-width: 33.33%;
}

<section id="Working">
  <h1>How it Works?</h1>
  <div class="wrapped_container">
    <div class="book_session container">
      <img src="http://via.placeholder.com/640x360">
      <h2>Book a Session</h2>
    </div>

    <div class="impression container">
      <img src="http://via.placeholder.com/640x360">
      <h2>Impression at home</h2>
    </div>

    <div class="virtual_smile container">
      <img src="http://via.placeholder.com/640x360">
      <h2>Get a Virtual Smile</h2>
    </div>

    <div class="delivery container">
      <img src="http://via.placeholder.com/640x360">
      <h2>Veneers Delivered</h2>
    </div>

    <div class="stay_in_touch container">
      <img src="http://via.placeholder.com/640x360">
      <h2>Stay in Touch</h2>
    </div>
  </div>
</section>