Trick: The shortest way ever to center columns in "last uneven row"

[Siton_Systems (Ezra Siton)]

Famous problem / design issue

You want to center horizontaly the last row of an uneven grid columns

How to (time 1-2 minutes )

First, no way to set cols width - so this is the trick:

1/4 - zero width

Add div to the page ===> Add class for this div called “zero-width” add width property of 0px. Next, Delete this div

2/4 - add class

Add “zero-width” class from (1/3) to the “unwanted” col

3/4 - justify center

Add class for the “uneven” row - change display to flex and horizontal direction & Justify: Center (2 clicks)

4/4. Change row on small screens to display block

Last step - on mobile landscape/portrait bring back display to block for the row

(In other words, the collapse <-----> cols & display: flex won’t work well together her)

---

Result

Equal-width & responsive perfectly center grid

Summary:

• Cons: Not so dynamic (You should manually each time to add/remove the “zero-width” class). Not useful for CMS collection
• Pros: Fast, Minimal styles. No need for custom flexbox grid. Easy to add/remove

Columns | Webflow University

[Thomas_92 (Thomas)]

Neat little trick! I’ve been using flex, or the other method, were you tell a client they can have 3 or 6, nothing in between

But thanks for sharing, bookmarked!