Center Grid layout of 4 items

Question

I want to center my 7 images, I set 4 columns for each row:

The code is like this :

display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));

Instead I want to set 4 columns in the first row, and 3 items in the second row, so it will look like centered. How to do that ?

In the duplicate, see item #1 in the [accepted answer](https://stackoverflow.com/a/55073039/3597276). — Michael Benjamin, Oct 03 '22 at 19:45

score 0 · Answer 1 · answered Oct 03 '22 at 19:18

You should use flexbox for this type of layout. CSS Grid isn't the best solution for centering last rows like that. This is what flexbox was made for.

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.item {
  height: 30px;
  width: 200px;
  margin: 10px;
  background: tomato;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Center Grid layout of 4 items

1 Answers1