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.

38%20AM

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.
CloudApp

1 Like

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

Example;

https://cl.ly/89678d90f435

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.

2 Likes

@peej,

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: https://www.loom.com/share/8c7cf88cdb134278bfc3660cebd96260

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

Here’s my site: https://preview.webflow.com/preview/vsimple?utm_medium=preview_link&utm_source=designer&utm_content=vsimple&preview=306cf8185810e96fe184ed24235e2e84&pageId=5fbd6c2e1b22401b649bb4ea&mode=preview

Thanks!

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

Your team member images seem to behave normally