Is there a way to center the content of CSS grid?

I would like for the content of my grid to be centered as seen in the screenshot, as opposed to aligning to the left.


Maybe CSS grid isn’t the best way to achieve this?

I would recommend using a flexbox instead of a grid for this. You can centre align flexboxes and they’re more responsive than the grid. Especially if you enable ‘wrap child’.

1 Like

@peej => Providing a read-only link would allow for more feedback.

Actually @peej you can align left, right, and center using grid.

You would just need to use the align options.

1 Like

Yes, this is possible in CSS Grid, as @QA_Brandon indicates.


Screen Recording 2019-08-23...

as far as I can tell this only aligns the content within the grid “blocks”, but the blocks are still in a regular pattern, which does not achieve the effect in the screenshot unfortunately

@peej in the example u provided u can still accomplish it with Grid.

Could you expand?
I’ve copied your settings, and the grid items are not displaying the way you see in the screenshot.



Please provide your share link. When you do that I’ll show you how it can be achieved.

How to create a share link reference this video: Loom | Free Screen & Video Recording Software | Loom

Hi @QA_Brandon , I’ve tried your suggestion but no luck

Here’s my site:


Hey @Mejji_Le, where are you having the issue, and what are you trying to achieve?

Your team member images seem to behave normally

Hi Peej, I am having same problem wanting to align the bottom row of a grid to the centre, did you solve this problem…?

@LShone - I recommend you use flexbox for that scenario.