Center uneven row in grid?

Hey all.
I was wondering if there’s a way to center an uneven row inside a grid.
Imagine I have 7 items inside a 4 columns grid (auto-fit). The first row has 4 items, while the second one has 3. This second row, with 3, is always left aligned, and I can’t find the way to make it centered (without stretching the items).

Does anyone have any clue how to achieve this?

Thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hello :wave:

Read only links with what you currently have setup, or images screenshots and clear descriptions can help you get a speedier repsonse :slight_smile:

FWIW, if you’re doing this statically and you need them placed like that, then use 8 columns instead of 4, and manual placement of the items in the second row.

If you’re using dynamic content, then Flexbox is your friend.

2 Likes

If you are not already, use grid with flex turned on and center the alignment.

I am currently having trouble with this same issue, a 2 row grid layout (the 1st row has 4 items and the 2nd row has 3 items). What can I do to fix?

I have been trying really hard to fix the same issue as well! I have a dynamic grid set up inside a flex container with everything aligned to the center however the last item is only showing up on the left side! Any help would be greatly appreciated :slight_smile: here is my read-only link: Webflow - NLPatent

The only solution ive found for this is to use flex instead of grid, or also use the column span of the last element to take up the entire width. Both work for neither are ideal. I hope webflow comes up with an easier solution for this

Webflow didn’t invent CSS grids. You’d have to talk to the W3C about that ;) Webflow can’t change the way browsers render CSS.

Flex is the easiest way, particularly if it’s a collection list where the number of items might change.

There are some grid based hacks as well.

If the content is static, you could use 2 grids, one for the first N-1 rows, and one for the final row. That way the final row could have fewer columns, and the entire 2nd grid could be horizontally centered.

Another more complex way to do it is colspans and fixed placement. For example, a 3 col grid with 5 items 6 columns. All 5 items are set to span 2 columns. Items 4 and 5 would then be specially positioned to offset them horizontally by 1 column. Item 4 would start in col 2, finish in col 3. Item 5 would start in col 4, finish in col 5. Columns 1 and 6 would be empty.

IMO, grids are simply the wrong tool for the job when you want an offset layout. They’re designed for a spreadsheet-like row/column display.