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
