Container Queries Give You Layout SUPERPOWERS

When I first learned about container queries over a year ago, I had a hard time wrapping my head around them. I think it's because of the context I heard about them in -- it was too technical of an explanation.
Once I started playing around with them, though, it all made perfect sense. And the power within them became apparent.
In this video, I'm going to give you an introduction to container queries that you can immediately wrap your head around. I'm also going to show you how we're going to be thinking about Frames (getframes.io) and Automatic.css (automaticcss.com) in a world where container queries exist.
The term "game changer" is overused, but in this context, it's a perfect term. This does "change the game" for CSS-based layouts and is a much more appropriate context for controlling layout over something like media queries.
Enjoy!
** 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 **

[@chrisgreen5711]

Absolutely freaking awesome Kevin - brilliant tutorial as always. Can't wait for this to be available in all browsers :D

[@jamesl.223]

very cool info Kevin, thanks again for another great post. If you are considering buying ANY of this guys products, ask yourself, how much was JUST THIS lesson worth to you?? Think of how many other lessons he posts for free, his products are VERY good (personally don't use frames but I can see why someone would) Buy his products (at least acss) you WILL become a better professional web designer for using it and realize that you're not just paying for the framework you're paying for this content also. /end rant

[@ted-e-baer]

Another great video, Kevin. The man is keeping on top of CSS pipeline. Then sharing his findings after ironing things. In turn he is keeping us current too. Enjoyed this tutorial. Cheers, Kevin.

[@PicSta]

Container queries are really awesome and as you'd said, it will change the game completely. We have to unlearn to think in device width and start over to think of what are the container sizes we want to change any kind of behavior. Your example shows all the major benefits and the in between sizes, like where the 600px kicked in shortly. Absolutely freaking awesome! Once it's up to 92~95% it will be super stable to use.

[@Gearyco]

Exactly! Some people still don't get it ... but maybe it'll click for them soon.

[@odinaka_joshua]

I've missed your tutorials, glad you're back.

[@taunado]

Very well explained, thanks.

[@davidwalls2304]

Great video **sneak peek** at what's coming. I'll need to watch this again to wrap my head around things but looking forward to when I can use this in the near future. Always great content from this channel.

[@RiyazShihabdeen]

That's an awesome tutorial @Gearyco. Thank you so much for your time and effort. 😍👍

[@tilenseliskar6463]

Love it! Perfect explanation with perfect use case.

[@richardc1925]

Great video Kevin!!! Looking forward to being able to use this!

[@ReubenHochstetler]

Absolutely gold! I cannot wait to start using this and will probably start implementing sooner than I should :-)

[@Gearyco]

It's very tempting!

[@AmandaLucaseu]

Loved this Kevin 👍🏻

[@eucalyptech]

Thank you Kevin for this technology watch!

[@ceescoenen]

This is amazing!! Thank you for sharing this. I hope soon there will be a frame for this :) I understand that we have to wait before it is implemented in browsers for 90% but in my head I go use it.

[@vaughanprint]

Powerful stuff.

[@jenniferward6821]

Great tut as ever. I am definitely de-chumping!!😂

[@VascoDanielBaiao]

Seeying you making an "awesome blog post" in three minutes at 12:00 is inspiring and relaxing. I think my mirror neurons got sharper just from watching the building on the fly 😄

[@luanf]

I think it's a great way to also quickly "visualize" what your design looks like in mobile. Even though we have media queries in page builders, it seems faster to update classes and instantly see what they will look like in mobile

[@Gearyco]

It's not about mobile-responsiveness, though. It's about what a component looks like when you drop it into a completely different context, like dropping a wide card into a 3-column grid. Changing the layout on a context-by-context basis isn't possible with media queries.

[@ScottMackey]

Another great video Kevin! Seems like adoption of this is already at 87+%, making it already pretty safe to use. I've not tested with fallback styling but not even sure if it's needed. Thanks

[@Gearyco]

I like to see things over 90% before production use.

[@Louis-C-online]

simply amazing, thanks for this great tutorial, it makes me wonder why this hasn't been available sooner ! But I guess media queries will still have some utility for layout purposes, like you did in your example with the grid right?

[@tootinghorns]

just wow!

[@danstevens1974]

Hi Kevin - another excellent video. I had not idea about this new functionality! Looks great. By the way - what screen recorder tech are you using? I like the way it zooms in and out and pans around the screen...thanks!

[@odinaka_joshua]

In the case of the example you gave here, (of a featured card) wouldn't a better workflow be to style the cards normally and then if the container is greater than 600px the "featured card" style appears. ?

[@Gearyco]

Yep, you can do it either way. I didn't have a specific context of a real website, so I was just doing it this way for demo purposes. But you want to look at how the card is used across the site and design it for the common use, then use container queries to manipulate it from there.

[@jybevox]

Wow, @container is already in the 90%! Summer is coming!

[@alexander-van-aken]

Wonderful work! Happy me! So one question. Am I right that the @container statement, is a browser-standardized statement that knows to check the parent because the parent has an instruction of container-type? So this can be used within SCSS too where one can put media queries inside classes.

[@Gearyco]

100%.

[@mrjohncrumpton]

Could you show the designed handover to developer using Frames? Its it a case of the dev clicking on sections, looking at the type of frame and inserting this in bricks builder? Or is there an export to bricks workflow? When creating a copy of a desktop version and choosing mobile in Figma, does Figma update the text between the two artboards?

[@estaschoeman5256]

Thanks Kevin! The speed of this session was great. Can we get more 30 minutes sessions like this in future?

[@Gearyco]

The sessions are as long or as short as they need to be. I basically teach what needs to be taught and I don’t focus much on the length.

[@estaschoeman5256]

I understand, but in general the pace of this session was much faster and that worked for me. I really appreciate all your videos and learned so much from them, but I seldom have an hour plus available during the day to join the live session.

[@koperkuba]

Its way to short;)

[@estaschoeman5256]

​@@koperkuba have a look there are videos that are almost 2 hours and in much more details on many subjects. :-)

[@dzulhelmi81]

What app you use to record the session? It auto zoom your cursor, thats nice! Name of the app?

[@nickarceco]

I know it wasnt the main piece of this video but I didnt realize we can run calcs without having to add calc() in bricks. was this an ACSS feature that was added? Also thank you for clarifying container queries. I had been curious about these.

[@Gearyco]

Yes, it's part of the "variable expansion" feature. Super helpful.

[@filippoponzetti]

Yeh I didn’t know either! That’s an amazing and very handy feature! Great stuff! Thanks @Kevin

[@jamesround86]

Awesome vid as always, Kevin. Thanks for sharing the magic. Two quick questions, is the container class already available in the latest production version of ACSS or is it a coming soon? And do we have any idea on when browser support will be in the 90's, like which ones are lagging? Thanks, as always 👍

[@Gearyco]

V2.6 - no telling how fast browser support will progress

[@charliesasser]

As a brand new Bricks user and an "intermediate" CSS hacker, does it still make sense to use fluid design using calculated variables for things like space, gap, font size, etc. but primarily use container queries for layouts only? In your demo today, you were changing the spacing, padding, gap, etc. in the container queries similar to what "chumps" do with media queries. So with container queries will our "fluid design" with calculated variables complicate the design or do you think you will recommend we just put everything in the container query based on what you know at this point? Hope this makes some sense. 😀

[@Gearyco]

Container queries are not a replacement for fluid design principles or tokenization. They should be used exactly as I showed them here. I will be doing more videos on them in the future.

[@Luca-ui3rn]

Hi Kevin, does it make sense to use css container queries now, since over 90% of all browsers support this?

[@Gearyco]

Since it typically has critical layout implications i would suggest waiting until it hits 93-94%

[@Luca-ui3rn]

@@Gearyco ok - thanks for your lightning-fast reply, as always :)

[@user-ik7rp8qz5g]

What are your thoughts on making general page layout with grid+containers?

[@Gearyco]

Not sure what you mean --- dont' I use grid and containers in every video?

[@user-ik7rp8qz5g]

@@Gearyco This is the first your video that I watched, so yes, maybe this question is answered in other videos

[@sophiemulders]

Stupid question 😅 how would you make a query loop out of this with the featured post at top?

[@Gearyco]

Should be the same process as always. Did you try and run into a problem?

[@Multilive1000]

Awesome! One thing I always see you do is converting --space-l for example to var(--space-l) automatically. How do you do that?

[@Gearyco]

ACSS

[@Multilive1000]

@@Gearyco I mean the keyboard shortcut you do.

[@Gearyco]

@@Multilive1000 In inputs, you just hit enter. In CSS box, you just add the ";" tag. It's automatic.

[@superoverdrive8628]

So easy to understand! Thank you Kevin! 😀 And btw, what are your thoughts on AI generated websites? Are we going to be replaced?

[@Gearyco]

Only web designers who use beginner builders, design kits, and lack a professional process will be replaced

[@DesignRobPearce]

Great vid and 100% see what it would be used for. Being brutally honest though with ACSS/Frames and with grids to make things easy and fast, purely from a speed PoV in Bricks surely just slapping some screen sized based grids / width full on a block in Bricks takes less than 30seconds and you're done to use them all over your site again and again. Unless you want the content contained to be radically different, but even with container classes you'd need to jump into the CSS and change them up, create new classes etc. Like I said, don't get me wrong, I see what they're doing and why. I just don't yet see why they're 'game-changing' compared to regular media queries in a practical use sense on the average website.

[@jasonvargas4798]

I wonder if it has to do with the quality of resposiveness. With all the device sizes out now, media queries tend to not always work well in all cases.

[@Gearyco]

They're game changing because what I showed (behavior change when using an element inside a grid vs inside a separate area) is literally impossible with media queries.

[@DesignRobPearce]

@@Gearyco sure, bad phrasing, I can see they change the aspect entirely. I’m just not seeing personally the why yet, but it may well come! Other devs I’ve spoken to also felt the same. I guess my point is more seeing the real world benefits / speed benefits of doing this vs using quick Acss variables with normal queries in systems like Bricks where saving and reusing components is also already so easy. Unless your whole site is made of cards or if you have tonnes of different cards or grids then maybe, but the extra div and styling work needed on top - apples and oranges? 🎉😂

[@alfian_ridwan]

New screen recording app? Looks extra smooth here.

[@Gearyco]

Yep. Already logged 3 complaints from viewers, haha.

[@alfian_ridwan]

@@Gearyco I actually love it. Is it Screen Studio?

[@alexander-van-aken]

Bedankt

[@Gearyco]

Thank you!

[@alexander-van-aken]

@@Gearycoa very small gesture of thanks

[@ukukudu]

Very cool. 👍🏻 You are making web design sexy again 😎

[@knuterockknee]

IT seems to be you are doing the exact same adjustments but only one time... Its very similar to media queries. AT 12:58 Why didn't you use the grid 2-1 class in ACSS ?

[@Gearyco]

I used grid 1-2 because I wanted the left side to be smaller than the right. Is that what you're asking?

[@knuterockknee]

@@Gearyco no you used grid builder in bricks. Couldn't you have used acss class grid?

[@Gearyco]

@@knuterockknee No, because I was using BEM classes. It's bad practice to mix BEM classes and utility classes.

[@JordanStambaugh1]

Who does your video editing? Love the subtle zooms and face video transitions

[@maksfischer7477]

This is off-topic (obviously since the video isn't even out yet), but 1 thing I always wondered: Why did you choose Wordpress as your CMS? To me it seems like most professional developers don't use Wordpress if they actually built sites for clients. Talented and professional developers built software FOR wordpress, because they know they have a large target audience and will generate a lot of money, but it feels like of all webdesigners that use Wordpress most are amateurs / wannabe pros. Why not something like TYPO3 if the requirement was open source? It's not such a mess, way more secure and I'm sure ACSS and Frames would be no problem with it. Is it because you started with WP before you had so much knowledge? Or are there other reasons? I mainly ask this because I myself started with WP when I had no clue about anything, but now that I learned a lot I always catch myself thinking about switching to a more "professional" CMS. Thanks in advance.

[@Gearyco]

Wp powers like 40% of the internet. It’s what everyone knows including most clients.

[@maksfischer7477]

@@Gearyco Hm okay but is this a valid argument? You are the one who says the client shouldn't touch the website (which I agree with). Also most people probably eat McDonalds when they eat burgers, doesn't mean that they have the best burgers / most professional cooks.

[@Gearyco]

@@maksfischer7477 I think WP as a CMS is fantastic especially given the vibrant ecosystem around it.

[@maksfischer7477]

@@Gearyco Okay thank you

[@rubengarciajr]

do you have any examples of a "professional" website made with TYPE03? Just wondering

[@Xenio2007]

Amazing video as always, but I am not a fan of this zoom/pan editing, I am getting motion sickness ;)

[@Gearyco]

So many people are a fan. And so many are not. Just like when I wasn't zooming before haha.

[@BGdev305]

Honestly.. still don't get it. Looks like your mixing sass / root with a contain class built into acss, WHILE writing a bunch of custom CSS in multiple places for multiple divs? Hell, to me, simply adding media queries and or media queries + classes still seem far easier to understand and make happen.

[@Gearyco]

No scss/sass in this video. Custom CSS is required because Bricks has no container query feature. And none of what I showed can be accomplished with media queries.

[@StewartRodgers]

It's pretty confusing if you're not familiar with automatics css and bricks, especially at the speed he's moving. Watching someone like Kevin Powell with just a html and css file might make it easier to wrap your head around the concept. You'd probably want to write the css in a separate file for an actual project, but writing it inside Bricks allows us to see what's happening without jumping out of the builder too much in the video.

[@BGdev305]

@@Gearyco Yea you're right.. I finally had time to play with this and yes I can 'see' it now. Hell, it gets even better with TWO containers (@container1 and @container2) side by side, it's some dope stuff that can be done.

[@kedimnvfjnnvfjffurju]

Best explenation of use-cases