How to centralize a grid in the page?

Question

I have the following list in grid which works so well, but I haven't been able to centralize it according the green section. I've already tried to use flex, but it didn't work. Could anybody help me kindly?

EDIT: I've added more itens to the list, once that it grid adjust itself to show more itens in rows. When I've tried to use the codes indicated in the answers, the grid is centralized, but in only one row (and I don't know if it is possible to centralize it with more than one row in the grid).

I inserted below my main code showing what I have done until now.

section {
  background: green
}

#related-posts ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(7.1rem, 100%), 1fr));
  justify-items: center;
}

#related-posts ul li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.pthumb img {
  height: 97px;
  width: 129px;
  object-fit: cover;
}

<section>
  <div id="related-posts">
    <ul>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 1</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 2</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 3</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 4</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 5</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 6</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 7</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 8</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 9</a>
      </li>
    </ul>
  </div>
</section>

I have updated my answer with flex-wrap to answer the edit on the question — Bits Please, Oct 20 '22 at 01:06
@MichaelBenjamin It's a good hint, man. I didn't know the difference between them. It didn't work to me, but it's an interesting hint. Thank you so much! — winiercape, Oct 20 '22 at 01:58

Bits Please · Accepted Answer · 2022-10-20T01:11:46.103

I am able to center it by adding the following css on section or #related-posts

display: grid;
justify-content: center;

and following on #related-posts ul :

display: flex;
flex-wrap: wrap;

Here is the working demo: Link

section {
  background: green;  
}

#related-posts{
  display: flex;
  justify-content: center;
}

#related-posts ul {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(7.1rem, 100%), 1fr));
}

#related-posts ul li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.pthumb img {
  height: 97px;
  width: 129px;
  object-fit: cover;
}

<section>
<div id="related-posts">
    <ul>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 1</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 2</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 3</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 4</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 5</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 6</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 7</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 8</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 9</a>
      </li>
    </ul>
  </div>
</section>

I appreciate your help and the hints, friend. The code you used centralizes the grid. Now I'm with another problem that is the lenght of the texts (if I edit the "Item 1", "Item 2" and beyond to larger texts, the itens of the list appear with diferent widths). But thank you so much for your kindness and helping! ;) — winiercape, Oct 20 '22 at 01:57

Crystal · Answer 2 · 2022-10-20T02:19:43.730

Do you mean like this?

section {
  background: green;
  display: flex;
  justify-content: center;
}


#related-posts ul{
  display: flex;
  grid-gap: 1rem;
  flex-wrap: wrap;
  
  }

#related-posts ul li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

.pthumb img {
  height: 97px;
  width: 129px;
  object-fit: cover;
}

<section>
  <div id="related-posts">
    <ul>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 1</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 2</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 3</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 4</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 5</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 6</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 7</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 8</a>
      </li>
      <li>
        <div class="pthumb">
          <a href="#">
            <img src="https://i0.wp.com/afrolady.com/wp-content/uploads/2020/04/Christians-1.jpeg">
          </a>
        </div>
        <a href="#">Item 9</a>
      </li>
    </ul>
  </div>
</section>

Yes, Crystal! I've added more details to the question. And I thank you for trying to help me. — winiercape, Oct 20 '22 at 02:00
I accepted Bits Please's answer but your hints were already useful! I appreciate your kindness, @Crystal. — winiercape, Oct 20 '22 at 11:32
cool. you're welcome.. im just making sure you already figured it out.. good you had an answer that works on yoru end.. happy coding :) — Crystal, Oct 20 '22 at 18:09

How to centralize a grid in the page?

2 Answers2