GRID JIU JITSU IN OXYGEN!
I wanted to do a tutorial on how to use Oxygen's grid builder, but I didn't want to do some boring nonsense like "here's what this field does … and here's what this field does…", so I'm creating a follow-along tutorial of a real-world grid structure you'll see and use everywhere.
And this isn't just for beginners, my friend. I'm baking some grid jiu jitsu moves into this tutorial that will absolutely SYA (save your ass) and make your life sooooo much easier on bigger pages or sites. Here's what it covers:
• How Grid works in Oxygen Builder
• Grid Builder pitfalls to look out for
• How to create a 2-3 grid structure with column spans
• How to change your grid structure on mobile
• How to auto-stagger your grid using nth-of-type
• How to auto space your grids with last-of-type
• How to change image order on mobile
• How to properly name grid components with custom classes
This is 45 straight minutes of practical "best practice" skills that will most certainly elevate your game and I went slow to make sure it's easy to follow along with. Have fun!
THIS TUTORIAL REQUIRES NO PLUGINS, NO UTILITY CLASSES, ETC. IT'S VANILLA OXYGEN BUILDER. And yes, this works with repeaters too (with a few tweaks).
Join the Inner Circle – https://digitalambition.co/inner-circle/
Get Automatic.css – https://automaticcss.com
0:00 Intro
1:00 Examining Trello's Features Grid
2:40 Follow Along
3:40 Tutorial Begins
6:30 Oxygen's Yucky Defaults
10:00 How Column Spans Work
13:00 Image Wrapper Tip
15:00 Adding the Content
17:05 Custom Classes Best Practices
22:45 Mobile Responsiveness
27:43 Auto Spacing Between Grids
30:27 Auto Staggering the Grids
38:20 Changing Image Order on Mobile
41:05 Admiring Our Handy Work