Centering 2nd Row of Grid Items

Question

I have a page with lots of grid elements currently. The grid is in 3 columns and 2 rows for the most part.

Most of the sections of my grid only have 5 items, so 3 on the top row 2 on the bottom.

Is it possible to have the 2 bottom items centered instead of left aligned?

Curently:

▢ ▢ ▢
▢ ▢

Desired:

▢ ▢ ▢ 
 ▢ ▢

Below is a simplified version of my code that behaves as described above. Can I achieve what I wan't with display: grid; or would I be better off using display: flex; and if I have to go the flex route, I would prefer all the cards to be the same size (which is why I went for grid at the start)

.service-option-container {
    margin: 1em 0 4em 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1em;
    row-gap: 1em;
    justify-content: center;
    
    .service-option-card {
        border: 1px solid black;
        border-radius: 20px;
        padding: 1em;
        margin-left: 1em;
        margin-right: 1em;
        .extra-pad-bottom {
            padding-bottom: 2em;
        }
    }
}

<div class="service-option-container">
  <div class="service-option-card">Card Contents</div>
  <div class="service-option-card">Card Contents</div>
  <div class="service-option-card">Card Contents</div>
  <div class="service-option-card">Card Contents</div>
  <div class="service-option-card">Card Contents</div>
 </div>

Also there are a few sections that have only 1 item in them and I would also like those to be centered.

You may want to use display: flex with justify-content: space-around. Alternatively you could have each grid row house 5 elements and fill 1,3,5 in the first row and 2,4 in the second. Not sure if it fits your use case. — J. Titus, Aug 02 '22 at 21:41

TheTanadu · Answer 1 · 2022-08-02T22:18:41.270

For precisely (!) 5 elements you can use transform on the last two elements, so you'll shift them from the left by 50% of their body width - which will make it perfectly centered in case of 5 elements (more/less will break it).

.service-option-card {
        border: 1px solid black;
        border-radius: 20px;
        padding: 1em;
        margin-left: 1em;
        margin-right: 1em;
        .extra-pad-bottom {
            padding-bottom: 2em;
        }
      &:nth-last-child(1), &:nth-last-child(2) {
        transform: translateX(50%);
      }
    }

Hard task to do this in current HTML<>CSS structure, because you've created 3 columns, which don't make centered option a thing.

Your HTML parent solution (x means it's div there)

|---|---|---|
|x1 |x2 |x3 |
|---|---|---|
|x4 |x5 |   |
|---|---|---|

here you can center just one div as you can see (it's on place of x2 and x5 div). To make centering possible for 2 below divs you'd need structure like this

|---|---|---|---|
|x1 |x2 |x3 |   |
|---|---|---|---|
|   |x4 |x5 |   |
|---|---|---|---|

but as you can see other devs wouldn't have "same" space. And doing more space for top row... makes more work to do for bottom row, to calculate "sweet spot".

What I can suggest you to is in parent make two different divs, just so you can divide divs for 2 rows and center them on bottom, and 3 rows on top and make them stretch.

.service-option
  .row.row-of-three
     .service-option__card
  .row.row-of-two
     .service-option__card

Centering 2nd Row of Grid Items

1 Answers1