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

Famous problem / design issue

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

image

How to (time 1-2 minutes :slight_smile:)

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)

image


Result

Equal-width & responsive perfectly center grid :blush:

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
3 Likes

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 :smiley:

But thanks for sharing, bookmarked!

3 Likes