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

Design help General
1

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?

2

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
3

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

4

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

You would just need to use the align options.
CloudApp

1 Like
5

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

Example;

Screen Recording 2019-08-23...

6

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

7

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

8

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

32%20AM
32%20AM1245×495 69.1 KB

2 Likes
9

@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: Loom | Free Screen & Video Recording Software | Loom

10

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!

11

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

Your team member images seem to behave normally

12

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

13

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