Html - Center an grid item

zAllan
June 3, 2023
234 views
0 votes
2 Answers

I’m having trouble centering my container’s item.

I need to align the third item to the center using display: grid.

I’ve already tried to use flexbox, but it looks worse for a responsive website.

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
}

.projetos-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.projetos-box img {
  width: 100%;
  max-width: 40rem;
  border-radius: 1rem;
}

<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>

Answers

Convert the Container to flexbox by using display: flex;
Use flex-wrap: wrap to allow a break to a new row
Calculate the width of an element to create a 2 column layout to respect the gap
Center the items by using justify-content: center on the flex-container

:root {
  --gap: 2rem;
}

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
}

.projetos-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) ; 
  justify-content: center;
}

.projetos-box {
  width: calc((100% - var(--gap)) / 2);
}

.projetos-box img {
  width: 100%;
  max-width: 40rem;
  border-radius: 1rem;
}

<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>

You may trick it and use transform but need to check a few things .

Is this standing alone on a row ? (an odd position)
Is this the last one ?
if both yes, move 50% aside of its own width + (for 2col) half of the gap set.

But it is basicly a flex job i would say 🙂

here is below a few test to demonstrate the idea and not mind about how many children you have in your grid.

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
  /* show me center */
  background:linear-gradient(to left,ivory 50%, silver 50%);
}

.projetos-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.projetos-box img {
  width: 100%;
  max-width: 40rem;
  border-radius: 1rem;
}

/* trick me */
.projetos-box:nth-child(odd):last-child {
  transform: translatex(calc(50% + 1rem));
}

<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>
<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>
<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>
<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>

If you dislike the transform trick, span this last odd element through both columns and give an auto margin.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Center an grid item

Answers