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: automaticcss.com/docs/content...
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: 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: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **

[@larryfarr]

Can it actually get any better than this? The product is beyond amazing and so is the instruction on how to use it. And all in 16 minutes? Seriously? THANK YOU!!!

[@endall1333]

Thank you Kevin, watching your videos is not only gold in terms of information but also a fun thing to do. I'm still waiting for the vanilla version though, that will teach us a lot too. Keep it up! Thanks 🙏

[@nickarceco]

the amount of calculations I had to do for this type of layout before. I might cry Kevin

[@ceescoenen]

Thank you Kevin!!! This is GOLD, I love the new content-grid and zones. Please do more of this amazing short tutorials ❤

[@eucalyptech]

Thank you Kevin 🙂 I appreciate your short tutorials, they are so easy to digest !

[@RiyazShihabdeen]

Kevin, this is truely mind blowing. I always wondered how to achieve this effect in an easy way. You taught it to make it in the easiest way here. Awesome! Highly appreciated. 👍

[@davidwalls2304]

Thanks Kevin. This is a great new capability that can be achieved with ease. I will need to experiment more with this so that I fully understand the powe.

[@LupusDesign]

Fantastic! Amazing! Stupendous! Kevin, ACSS & you rock!

[@sebastian.schwarz]

content-grid FTW! great job! looking forward to v2.8!

[@quickend01]

You never disappoint, Thanks, Kevin!

[@wpeasy]

Wow, what a great innovation . This is next level easy :) Excellent work guys.

[@DesignRobPearce]

Very, very cool. Loving the work.

[@iamanty]

Game changer! Looking forward to the vanilla CSS method.

[@rubengarciajr]

I need this in my life! this is amazing! i love this look

[@MusicJunkieVideos]

awesome...I have submitted a purchase order to my accounts dept for ACSS and frames, Cant wait. Please keep up the amazing work thx

[@Gearyco]

Thank you! Will do!

[@stevebaker2896]

Content grid is awesome. I use these split heros a lot and while I already have templates made for them, this method looks very quick to do on the fly. Great stuff!

[@Gearyco]

Let us know what you think after you use it!

[@stevebaker2896]

​@@Gearyco It's already fixed the issue I was having with breakout-full that was adding a few px of horizontal scroll - so that's a great start... Not sure I'll ever use regular sections again!

[@Gearyco]

We'll have an option in the next update to replace standard section padding/structure with content-grid on all top-level sections by default.@@stevebaker2896

[@nick90000]

this will be so handy, great job

[@kristapsvilcans]

This is exactly what I needed, thanks

[@dahunsi]

ACSS 2.8 release date. So much I am waiting for there.

[@digwillhachi]

So good !! ACSS is best thing i ever bought lol.

[@OscarObians]

9:40 Whoa that's a life changer right there. To think I'll never have to use negative margin calcs anymore for breakouts

[@nostressirish2767]

Thanks Kevin, you're my bricks red belt instructor.

[@asthon9241]

This tutorial is so helpful！

[@AmandaLucaseu]

Fantastic video 🤯

[@AmandaLucaseu]

This is awesome 🙌🏻

[@buntuscainte4987]

very nice Kevin 👍

[@keviincosmos]

Just like Kevin Powell showed some time ago. Great to have it built in, I can now remove my own 👏

[@Gearyco]

This concept precedes Powell. Plus this implementation is even more flexible.

[@keviincosmos]

@@Gearyco yes it's great. 💪

[@JeffTincher610Digital]

Did I miss a major time saver??? How'd you work that crazy fast voodoo magic on typing in the website or lorem ipsum??!

[@fiqihalfarizy4843]

this is one of frequently yet tricky layouts, would be awesome if you could make a dedicated series of how you tackled it

[@joewebdev]

Looking forward to that promised video on the 'traditional approach' to solving this in Bricks without ACSS. Can't find this specific challenge being solved on other YT channels.

[@Gearyco]

Probably won't come. It's an inferior technique and it's a waste of time to teach it at this point.

[@abdulwaheedorg]

Wow, I never knew ACSS was that powerful ❤

[@Gearyco]

💪🏻

[@laufal]

At this stage, it's no longer Automatic CSS, it's "AutoMAGIC CSS" :-)

[@davidnickson5043]

That is wild!!

[@eng.farahkh]

very helpful 👍

[@nick90000]

updated to ACSS 2.8...tried it ....works 🥳

[@Gearyco]

There is one small specificity issue. Hot fix coming out in a day or two.

[@geckografix8045]

Love it thank you

[@TheTrentmoller]

Hello Kevin, Thanks for this great tutorial. I have an issue, picture don't actually grow. Even with grow=1 and wrapped it with figure, objectif fit = Cover. I can't figure out what the probleme is. Any Idea ?

[@jmcbade2960]

Awesome stuff Kevin! I know I am being selfish here :), but I don't really care so much about the 'vanilla' CSS method as I do about more videos on how to use all these new features.

[@flekz384]

Thank you very much for this tut, very helpful! do i need to write content-start/content-start for the mobile breakpoint to make the image go into content mode instead of breakout?

[@Gearyco]

Just “content” by itself will do!

[@abdulwaheedorg]

Watched it again and waiting for the video to make it using pure vanilla CSS.

[@BGdev305]

Ready

[@LindaShum]

This is fantastic! ❤🎉😊 I spent all of last weekend trying to do a split content layout until I just found this video of yours! Question, what if you want to put the text and button on top of the image and a logo in the tinted colored side. Would I put the image in as a background image?

[@Gearyco]

I would have to see an example

Love it!! When I was watching Kevin Powell´s video on grid-template-areas I thought thats realy nice. Having this right at your fingertips thanks to ACSS is once again, a gamechanger..... Im just so damn glad to have purchased ACSS and co. right at the beginning. all of this stuff is just streamlining my workflow. One question I've been asking myself a couple of times is, is it realy neccessary to add the 1 template row in the grid like you did at 3:41? By the way.... Why is no one talking about that sneakpeak inserting some placeholder text with autofill (;ipsum--short)? Perrfect! Hope this is already available in 2.8

[@Gearyco]

Powell got the technique from somewhere else. I spent a bunch of time with it considering additional things like a double zone as well as the proper use of locally scoped variables to make it flexible on the fly instead of a fixed system --- so it's upgraded and more flexible beyond any other iteration I've seen. The 1 template row is for Safari, specifically. Safari throws a temper tauntrum sometimes when rows are defined.

@@Gearyco You absolutely nailed it! :) Good to know with safari, will try to get this into my workflow. I do use quite a few Apple Product, but mainly chrome as my default browser.

[@TobiasGronbach]

Cool!

[@vaughanprint]

Full screen on right. Just what I was looking for. And I assume it can be reworked to to an every other image to the left, if required.

[@Gearyco]

Yes both shown

[@shibupandit24]

Yes left and right both 😅

[@Atractiondj]

It's funny to watch the presentation - Grid Area under the wrapper Content Grid, and how ordinary people react to it as if it were magic )).

[@Gearyco]

Very few people know how to create this type of grid with the amount of flexibility we've built into it. And no other framework has it. So ... it's pretty great. Maybe you don't understand exactly how great it actually is...

[@damiansaunders2074]

Well it pretty much is as far as I'm concerned lol...signed ordinary me.

[@Gearyco]

Nevermind the do-nothing trolls. They love to run their mouth but can't ever find the record button on their camera. @@damiansaunders2074

[@haroonqraja]

This looks great! How does one ensure that the split between the two blocks happens at dead center of the viewport, automatically accounting for the size of the unused space on the side of the block that isn't being stretched to the edge of the viewport? Because that's usually the primary requirement I have when building such split sections.

[@Gearyco]

The split can only happen dead center if you use a 50/50 layout. Proper content alignment is far more important than gap position. But gap position is always gonna depend on your grid structure

[@vaughanprint]

I think you can. If I’m not mistaken the example at the beginning of the video is split correctly 50/50.

[@Gearyco]

I figured out how to make the gap always be dead center...

[@haroonqraja]

@@Gearyco Of course you did! Wouldn't have expected any less from you. Please do share.

[@Gearyco]

@@haroonqraja I posted it in the ACSS group

[@loukaskouros2582]

This is very awesome! If i need to use this with a Repeater for example and i want first section left image and right text and on second section vice versa will work or need something else? Thank you :)

[@Gearyco]

No that’s easy to do with “nth”

[@loukaskouros2582]

@@Gearyco If the content is dynamic? Manually will work but if i use repeater and i have option for example select side of image left or right?

[@craigc2268]

Hi, I am wondering if your inner circle is good for people who are very amatuer level but wanting to get into Web design/development. I have been mucking about with websites for about 7 years and have built quite a few basic eccommerce and blog websites but I always get stuck and can never find the right answers to my questions on facebook groups etc so it's always put me off pursuing it as a career path. I'd love to go back to the beginning and find a course with videos that takes me through one step at a time and covers everything. From the wording on the inner circle, it appears it's for people already in the field. Is this correct or is it good for me? Thanks..

[@Gearyco]

It’s for all levels. It’s more geared toward business and other agency related skills. But very valuable for beginners.

[@jtabdesign]

Although it can be overwhelming when you first come, everyone is super helpful. I recommend going through PB101 series he has as well as joining the group.

[@jerrycompanjen5325]

There is a frame that does this already with custom CSS... Will those be updated too with this new content grid feature?

[@Gearyco]

Perhaps. It requires a ton of resources to go back and update old frames and this would delay new frames. Not to mention that we have to wait a good amount of time for people to upgrade their ACSS or we risk frames being broken when they import. So, it's not as easy as it sounds.

[@gabrielatwood8360]

On mobile with the content stacked, can you show how to make the image full width while keeping a gutter on the text?

[@Gearyco]

Super easy. Ask on today's WDD Live and I can show you.

Any chance you got an answer from the WDD live? I skimmed it through as well as I could but didn't find any info about that.

[@getsomemilc]

Would be awesome to add this component to Frames

[@Gearyco]

I think it’s there

[@MB-sl8pw]

Can you change the stacking order on mobile ?

[@Gearyco]

for sure.

[@christophheine4725]

Problem is, if you want a 2/2 grid and start the image exactly in the middle + breakout. As far as I can see, we don't get a content-middle variable, do we?

[@Gearyco]

Can you show me an example?

[@christophheine4725]

@@Gearyco 50/50 Split in the middle, stretching Image. Like on the Peachtree site

[@Gearyco]

@@christophheine4725 that would require the breakout method. This isn’t the primary use of content grid it’s just one example/option of how to use it. The breakout method doesn’t have good support for uneven grid ratios so content grid is superior for those. It’s about having multiple options depending on what you need.

[@christophheine4725]

@@Gearyco I am pretty sure, that many people would expect to be able to build something like for example Footer Indigo with it, without using 50vw shenanigans on the image etc.

[@Gearyco]

I figured out how to get the split exactly in the middle...@@christophheine4725

[@reufjaha123]

In Elementor this takes more than 1hr, this is crazy really :D

Is the acss color picker still coming or already available? I cant find it. I also have Advanced themer and heard some things might conflict eachother but disabling AT didnt give me the acss color picker.

[@Gearyco]

Which color picker are you referring to?

@@Gearyco I think I missed some documentation resource in my searching for it, but from a random comment on IC I saw that you had to right click the color circle to open the ACSS color system/swatch/picker. Kind of a facepalm moment haha. All good now though, thanks!

[@jmcbade2960]

What is the shortcut / method / add on? that you are using to generate Website ipsum?

[@Gearyco]

It’s coming to 3.0

[@fegede12]

Good one! but what about the Inner circle? Fewer & fewer videos and engagement on your side :(

[@Gearyco]

The schedule is 2 trainings per month. January was just one because of some editing issues, but will be back on track for Feb.

[@fegede12]

@@Gearyco editing issue also on Feb?

[@Gearyco]

@@fegede12 right now the biggest priority is ACSS 3.0 and we are sprinting to get that completed. There have been many times in the past where I focused much more heavily on IC than anything else. There’s an ebb and flow. Doing my best.

[@davidyisrael403]

Kevin, what pluggin do you use or highly recommend for multilingual/translation?

[@Gearyco]

We don’t really do any translated sites. Our market doesn’t tend to need them, so I cant really say.

[@davidyisrael403]

@@Gearyco Ok, thanks Kevin.

[@1anchit]

So you probably finish website projects in 30 minutes? :D How can i learn from you, or do you offer remote work opportunities?

[@Gearyco]

geary.co/inner-circle/

[@michaelvandinther]

This is already available in Frames right? 😝

[@Gearyco]

Yes

[@korova-moo]

So I followed this...and couldn't get it to work. I had to apply content-start / full to the inner but on the ID level. It didn't work on the class.

[@Gearyco]

Try again in 2.8.1

[@korova-moo]

@@Gearyco that fixed it. I was also hoping you could make the media full width and then the content-wrapper in "content" when it gets stacked.

[@Gearyco]

You can still achieve full width media on mobile easily. @@korova-moo

[@stevewilkison]

At about 4:05 you add some ipsum text by typing ";ipsum--short". Doesn't work for me. Is that something in ACSS or Bricks or something else? Thanks!

[@Gearyco]

It’s coming to ACSS but it’ll be done a little differently.

[@stevewilkison]

@@Gearyco Thank you!

How can we use the shorthand for some Ipsum text? I see you are typing ";ipsum--short" But that doesnt do anything for me...?!

[@Gearyco]

Might be a future feature ;)

@@Gearyco damn, I guess I'll wait for 3.0 then.... :D One other thing Im facing using grid-content. I have built this exact Section. Would like just the image to strecht full width when stacked. How would I get that to work?

[@vickydeclasca]

Waw

[@GavinDavidson]

Awesome. ❤