Place wrapping items in the center of the grid

Question

I have a CSS Grid layout which looks like below:

This works perfectly for me, but when I lower the resolution of the screen, the grid's responsiveness makes the grid look like this:

Instead, I want the wrapping items to justify the left and right white spaces, and they should look like this:

How can I achieve the above? The items are dynamic in number. There can be even number of items which will make it look better as the left and right white spaces will be equally spaced. But if the items are odd in number the white spaces should still be equally distributed. I tried with grid-auto-flow and align-items, but they don't seem to be helping.

.accordioninnergrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.innerbox {
  display: flex;
  border: 1px solid black;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word;
  width: auto;
}

.innerbox>p,
img {
  margin: 1%;
}

<div class="accordioninnergrid">
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="some-image" width="50%" height="50%" />
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
</div>

Answer 1

This is a problematic layout with Grid or Flex. There's no simple solution with either.

---

With Grid, there's no way to automatically position items in the middle columns. How does the grid know it needs to place grid items in, let's say, columns 3, 4 and 5, so that they appear centered?

Worse, what if there were only four columns and one item to center? That item would have to span across columns 2 and 3.

There's no grid function that does this automatically. It must be author-defined.

---

With Flex, the problem above doesn't exist. But there's a trade-off. Flex has a problem that Grid doesn't have.

It stems from this section of the code:

.accordioninnergrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

The grid-template-columns rule is saying that each column can be a minimum width of 240px, and a maximum width of 1fr (i.e., all available space).

In flex, the property to use in place of the fr function would be flex-grow.

But, because there are no column tracks impeding movement across the line in a flex container, flex-grow is free to expand items across the entire line.

In short, flex-grow and centering cannot co-exist.

If flex-grow were removed, then you'd have no problem centering with flex. But, of course, there would be another trade-off: you would lose the consumption of free space feature:

.accordioninnergrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.innerbox {
  flex: 1 0 140px; /* fg, fs, fb -- try fg: 0 */
  display: flex;
  border: 1px solid black;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word;
}

.innerbox > p,
img {
  margin: 1%;
}

<div class="accordioninnergrid">
  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>

  <div class="innerbox">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <p>
      This is the text
    </p>
    <p>
      Small Tagline
    </p>
  </div>
</div>

---

More details here:

• Aligning grid items across the entire row/column (like flex items can)
• Targeting flex items on the last or specific row