How to Create a Split Hero Layout With a Magic Wand Called "Content Grid"

Full-Bleed Split Hero layouts are popular but not all that easy to get right. If you want to make the entire thing full width, that's pretty simple, but the requirements usually call for maintaining proper content alignment with the rest of the page's content.

In situations where you need to maintain proper content alignment while also still achieving full bleed media, you usually have to use some sort of breakout technique. And if the media needs to be on the left, you also need some flexbox magic.

Not anymore, though. Content Grid actually makes this insanely easy. Too easy, perhaps.

In today's video, I'll show you the Automatic.css "content grid" approach to achieving this layout in just minutes. Next week, I'll teach the old-school flexbox/breakout method.

Content Grid is available as of ACSS v2.8. You can read more about it here: https://automaticcss.com/docs/content-grid/

*** MY TOOLS ***

🔥 AutomaticCSS (ACSS) - https://automaticcss.com
🔥 Frames - https://getframes.io
See all my recommended tools here: https://geary.co/tools/

*** INNER CIRCLE ***

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!

Learn more and join here: https://geary.co/inner-circle/

*** SOCIAL ***

👉 FB - https://www.facebook.com/marketingkev/
👉 LinkedIn - https://www.linkedin.com/in/kevingeary/

*** CHAPTERS ***