Subgrid & Container Queries change how we can create layouts

kevinpowell.co/courses?... 👈 Looking to get better at CSS? I’ve got a range of courses, including several free ones!
Container queries and subgrid are now both supported in all evergreen browsers, which is super exciting, and as a bonus, they can work really well together!
In this video, I explore a classic subgrid example, and then step things up with the use of container queries, using that to add a subgrid to featured element across a few break points, and also looking at how container queries can break subgrid if we try to use them both on the same element.
🔗 Links
✅ The code from this video: codepen.io/kevinpowell/pen/Rw...
✅ More videos on Subgrid: • Subgrid
✅ Adam Argyle’s article on Subgrid: web.dev/articles/css-subgrid (I thought Adam wrote this, but I don’t see an author anymore so 🤷)
✅ More on grid auto-fit: • Easier layouts with th...
⌚ Timestamps
00:00 - Introduction
00:48 - What we’re starting with
01:45 - Setting up the main grid
03:00 - Setting the stage for using subgrid
05:20 - Adding in subgrid for rows
08:06 - Using a container query to change the style of a featured card
12:55 - Adding subgrid columns to the featured card
16:50 - Container queries can break subgrid
#css #cssgrid #layout
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@gauravkumawat5811]

It's been 2 years since I started following your channel & I never regretted doing so. I just feel blessed having such a great teacher by my side❤❤. Lots of love to you Kevin. May you get 20M subscribers on KZbin. Keep up the good work. Supporters like me will always be by your side😊😊

[@MattDunlapCO]

@KevinPowell this is the best subgrid demo I've seen to date. I think a "can-i-use" video explaining how to decide when a new feature is safe to use would be helpful. Also, maybe a regular segment just reviewing the state of features we're waiting on (color-mix, subgrid, container queries [size and props], anchor positioning) from relative usage to feature ticket progress would be amazing.

[@KevinPowell]

So glad that you enjoyed this one :D - Also, a quarterly check-in on the state of new CSS features could be a good idea!

[@clevermissfox]

Gah anchor positioning is gonna be 🔥

[@Dunktastic17]

Very exciting to see all these new CSS features in action! Awesome tutorial!

[@MM_Sheehan]

One of the best things about watching these videos is catching Kevin's excitement about new features. Don't ever change.

[@mkm_]

Really great demo of subgrid and container queries, just the memory refresher I needed. Looking forward to using these features now that they are better supported.

[@darvil82]

I never knew how powerful subgrid was until now. Thank you!

[@amaury_permer]

Is funny that I was working with subgrid yesterday in a similar way and then you upload a video about the same, great content as always!

[@safie01]

Que satisfatório ver os items se ajustando, ver tudo funcionando assim me deixa "🥺 I'm amazing".

[@Shaheer-xs5os]

This man is awesome, he always have something new

[@winningtech5]

love how he uses, the latest css properties now. i watch your videos but when i start coding i forget about these new features and fall back to the old way i write css.

[@lukedorny]

I love adding a :last-child {margin-top: auto} to force the price section, for example, to balance out the layout when all cards are the same height. Great video.

[@gknt7234]

One of the best CSS videos in 2023. It's like a recap video, Google should use this on their websites!

[@CZghost]

This is so useful for my sharepoint subsite in the making. Thanks.

[@daveden2]

wow, I never thought about using the grid-auto-rows like that... coupled with the subgrid. I'm learning a lot from Kevin every day

[@clevermissfox]

Would love some context and a demo on animating grid some day!

[@abomayeeniatorudabo8203]

Came from a data science background and fell in love with fronrend because of you.

[@adeisaac]

I officially crown thee, "King of CSS" 👑👑👑👑👑

[@shineLouisShine]

Great stuff. Thank you

[@PacificDev]

I am always amazed by your videos🎉

[@jadinethomas8935]

Thank you!!! No more hecking around with Matching heights with JS.

[@bopuc]

1. Amazing. As someone who had to hack hundreds of layouts in tables back in the days, this is truly tears-of-joy inducing. 2. Do you have Chromium, WebKit and Gecko running in your brain?! The speed at which you do this is like you are rendering everything in your mind's eye before you type it in haha. (Of course I don't imagine you just start the camera and record but really prep these so you're ready, but still…) ;)

[@zsoltoroszlany7172]

I'm so angry to myself because everything is easy, I understand. But when I need to work with grid, subgrid etc. everything, my knowledge just vanishes. It is frustrating but maybe if I'm going to spend more time with it, it will stick. Thank you @KevinPowell for the greate tutorial.

[@ainschy]

Thx, looks great for the future of css design

[@ronpalmer7260]

I had this issue with my blog post cards. I got it to all line up but it took a lot of guess work and trial and error. I like this solution.

[@daveturnbull7221]

Miriam Suzanne gave a great explanation/demo of when and why some parts of CSS break over on Learn With Jason. Really interesting talk about how the whole CSS Working Group thing works.

[@jfftck]

I am so happy for the focus on layouts in CSS instead of the visual aspect - animations, shadows, masking, etc… This was one of the arguments for CSS when it was first introduced, but then I started to feel that the CSS working group was losing focus. Now that layout is more of the focus, I am getting excited about CSS again.

[@VasilyPavlik]

Ohhhhhh. After each of your videos I walk for hour or two around and think how I can use this knowledge. But today I was searching for this knowledge in many places. And only place I've found all answers is here. How did you know what I wanted?

[@spatialoptic]

Thank you so much

[@vlad_gabor]

I've been using flex for most of my work but after seeing this video I might switch to grid and containers. Awesome work you've done!

[@igordasunddas3377]

Same actually. I really think I have a good understanding of how to get stuff to display nicely using flexbox, even for RTL languages, but this looks very interesting and promising and when I finished the video, I definitely wanted to give another thumbs up to it. Awesome work, Kevin!

[@wojciechbajon]

finally I'm understand subgrid

[@tomapedersen]

Around two years ago I was implementing almost the exact same design (image of various height on top, two text boxes with unknown number of lines). Firefox had subgrid then, and I was looking at it while implementing some ugly Javascript and cursing. Very pleased that subgrid is in all browsers now.

[@anarchodin]

If it's not useful to ad-tech offering, Chrome is slow to adopt. :)

[@LaughingInCorner]

This is great

[@clevermissfox]

Note- container-type: inline-size is incompatible with subgrid; they cannot be on the same element

[@aram5642]

Form layouts will also get simpler, esp. those split into columns with labels on the left

[@danielgago-sk]

Perfect. Subgrid and 100dvh ist perfect solution for many of my problems with design or displaing web page on mobile devices... 👍

[@Asyncsprice]

I loved your part in the scrima front end dev career path!! Do you have any plans to put another little course on there? maybe involve CSS variables or some of this sub-grid stuff!! would be awesome. Any way happy developing!

[@KevinPowell]

Really glad that you liked it! Right now I don't have plans for new material there though. It's not a *never* type thing, but nothing planned

[@rahul9704]

Subgrid was one my most wished for feature since grid landed

[@djmtype]

Would it be better to use 1/-1 on product row instead of span 3? For example, if you were to introduce another element on the product card, the grid would break because it would need to span 4 rows.

[@altaccount648]

I wish CSS had better nesting like SASS, honestly the only reason I don't want to use plain CSS is the below-average nesting.

[@clevermissfox]

How did I not clock that container queried can be nested within a certain selector. I had also just been wondering if a grid items container would be the main wrapper OR it’s specific cell (since width: 100%; ends up being in relation to the cell not the main wrapper) good to have clarification thank you!

[@orbitory7936]

Can you talk more about container queries, support for them and how can we add support for browsers that don't have it?

[@ScottMackey]

Another great video Kevin! Wonder what has changed so that CSS is making so many great changes/enhancements at a fast pace? Given that for over a decade we was stuck with floats for positioning. 🤣 Thanks again.

[@erickmoya1401]

IE was deprecated.

[@ScottMackey]

@@erickmoya1401 yeah kinda weird that we have some form of standards now too.

[@bentoth4324]

If you are using webpack (or worse, Safari) you can use: grid-template-columns: repeat(auto-fit, minmax(calc(min(100%, 180px)), 1fr));

[@tonyr.6637]

Brilliance all around! Nice to see such a great combo of subgrid and container queries and native CSS nesting! Thank you 🙏🏽

[@KevinPowell]

Thank you so much! Really generous of you!

[@cykonetic]

Nested tables led to a revolution in CSS which now introduces "subgrid"... looks a lot like nested tables to me ...

[@jacobharvey2946]

I haven’t tried it in a decade… I wonder how all this modern grid stuff would play out with my flexible SVG project I had back in the day. Effectively it was what you see a lot of sites do with their logo (shrinking it when the page scrolls) on steroids. I based the testing on a another, popular experiment at the time that basically used a sprite sheet. I used the object element and CSS connected to the SVG to resize and manipulate logo(s). The object tag allowed for a sort of sub-page effect. End result was whatever the dimensions of the wrapping element affected the SVG.

[@jacobharvey2946]

More unrelated, but the first thing I actually thought of when this popped up. I wish I could convince my only freelance client to be more “flexible” with one of the pages on their site. It’s basically a press page where two page spreads, magazine covers, and web articles all live together. Naturally it’s a grid of items. But with all the variations on image sizes, sometimes it being 2 side by side images, and the client’s requirement none of them can be cropped, it’s a pain to deal with. And of course, new, varying sized items, reflow the page and I periodically get asked if there is another way to do it. Every solution I’ve come up with is slapped down. Long story short, they want a flexible layout for the modern web, while somehow also having pixel perfect precision, using varying sized elements. 🤦‍♂️

[@shankar99977]

@KevinPowell this is amazing... why you don't make videos on "float"? Could you please make video on floats? I watched your old one too...

[@pharmokan]

great vid. but I hate how the cards cut off the image, is there any workaround for that?

[@hugodemenez]

Awesome

[@parahumanoid]

Dear Kevin and fellow subscribers, if I recall correctly, it was once mentioned in the channel, that DIV is inline according to spec, but block by default browser styles - unanimously. If so, would you please be so kind as to hint where I can confirm the specification default display type for DIV? Thank you.

[@Hobbitstomper]

Chrome: Hold my beer. Firefox: Wait, where's my beer?

[@the3rdchief]

If you watched this video, not knowing what to expect... gather here, please😅

[@NicCynthia]

Same here... I searched "learn Css with Kevin Powell" and I got this.. haha let me learn and see what it's got😎

[@shineLouisShine]

To be honest, it rarely happens, that I'm clicking a 'Clickbait title' (such as "Game Changer" in this case), and think that the bait was justified. This one is different in that regard. So... Yeah... I didn't know what to expect but I'm very pleased being tempted to land here because the content is truly informative.

[@rijine]

Cool..

[@onitech38]

Hello @kevinPowell. I'm learning html and css in my own, and I'm having a lot of troubles when personalizing the page...on the styling part😅...can you help me

[@sawilliams]

Kevin, How do you know all this stuff!!!!?

[@nikilragav]

7:05 so that first row of cards where the text is wrapping onto a second line is actually taller than the second row where the text isn't wrapping, right? What if I want every card to be the same size (big enough so that none of the text overflows

[@eccenux]

This is a bit of a nit picking comment, but something others may learn from. To get a better structure and wcag/a11y: the product divs should probably be sections with a header on top of the section or with `aria-labeledby`. I know that Kevin probably knows that as he shown good knowledge of a11y in the past 🙂 and in this case it would probably complicate the example. But something worth knowing that the grid in that structure and layout would be a bit "awkward" for screen readers 😉

[@brandonwebb474]

Hi Kevin!

[@KevinPowell]

👋

[@CarlosBronze]

oh wow Subgrid is now Global 79.34% on caniuse. thats in 10 days!

[@paulab9310]

Kevin I really liked this tutorial and it made me go for subgrid to align the lines of a list of articles. The only issue I have is what happens when you want this card elements or products in your case to be wrappend in an a tag. I want people to be able to click on a the card and be redirected to the actual article. I've sent the a tag for now for the title and the paragraph but it makes my HTML not very DRY. Any suggestions?

[@danielgago-sk]

js can control clicks on any element or entire block

[@scottfwalter]

Safari seems to have an issue with: grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); Any thoughts?

[@qassimahmed1791]

Hello i have a question, why does the body or a main or some kind of container gets a height of 0, even though there are contents inside, but they appear outside in the inspection Or even sometimes the body does not take the full width of its content, in other words the whole page or so, What i want is a way to make sure all my content stays inside their respective containers, and inside the body

[@djkomp3tenz]

When I don't need the Aside Element and I want it to be Responsive and in the Center with in 480px what should I do?

[@olesejus]

Nice demo. However this type of problem its still easy to solve with other solutions. But subgrid will be super useful with tables. Where column width should be dynamic depends on text length. Now to do that is only possible with where table have its own styling problems. Flex would give you different cell length per different row. And with bigger projects there is always many tables. Most common solutions to that is to use event does not look good. Use JS to dynamically count cell width, but becomes slow. Would be interesting if you try to play and maybe demo solutions in some other demo ;)

[@KevinPowell]

How would you solve this problem without subgrid? For the image height, it would work, but not for the lines of text that are either 1 or 2 lines that I had on my titles :) - I'm not sure why we'd need subgrid in a table though, and not just a regular grid? 🤔 - And if we do change the display property of a table we have to be careful because it strips all the semantics of the table away the instant we do that, so we need to add everything back using aria roles (which we can do with JS, manually would be a nightmare).

[@olesejus]

@@KevinPowell price field in this demo is fixed height. so any flex or grid option with flex: 1 or fr1 for middle header field works fine. I understand the idea you wanted to explain. But that would be more noticeable for traditional horizontal table where you need to sync column width.

[@calyodelphi124]

This will depend on the contexts in which you use when you don't want to use it, because if you need to arrange tabular data, it is always an accessibility best practice to use the tag so that screen readers for the sight-impaired will function properly when reading the contents of the page to the user. But if you're arranging content in some kind of griddy way where we might previously have used or even the 960 grid framework, then the CSS grid module is definitely the way to go.

[@heavylog1c]

Grids are overcomplicated. Still using flex. Container thingy is pretty cool though.

[@timgreller]

there is nesting in default CSS now??? How did I miss that lol I already knew and used sub-grid, I know about the container queries for some time now. But I was so expecting the code not to work when you started nesting the CSS selectors in a normal CSS file. I was wondering how long it will take you to realize that you are in a CSS not SCSS file. But then it just worked 😂

[@webdeveloper4742]

Kevin keep your volume levels the same in each upload as Google doesn't like variable levels.

[@girabbit]

So the subgrid means that an element that spans multiple columns or rows has its children obey the parent grid. Is that right?

[@AdrianCBlack]

is there a pen with this exmple on codepen?

[@AdrianCBlack]

found it 😀

[@zinodavidoff5953]

👑

[@teacherrameshkumar]

At this point of time, could one just rely solely on grid/sub-grid alone and forget about float, flexbox etc?

[@katlegomonama5824]

css king

[@peterl0815]

Very cool ... but I don't want to change or debug it a half year later ;-)

[@rand0mtv660]

It's unfortunate that subgrid has only started to gain traction recently. If other browsers implemented it in 2019 when Firefox did, world would be a better place now

[@KevinPowell]

100%, but better late than never 😅

[@muhammadusmanakram406]

i did not get grid/subgrid at all

[@moshpat86]

GUNDAM ❤️

[@albertjoanagramontesuero5290]

Hi

[@KevinPowell]

Hi!

[@JasonJA88]

The mobile support is a little better than what is shown on 'Can I use.' On iOS, most browsers are just reskinned Safari, while on Android, Chrome is under the hood.

[@KevinPowell]

On iOS every browser is reskinned Safari, as they all have to use webkit. On Android, however, that isn't the case, the can use their normal engine. A lot of the time for mobile, the most important number to look at is when iOS gained support for it, since it's directly linked to the version of iOS, you can know what devices support it or not.

[@confused_horse]

What happened at 2:41?

[@KevinPowell]

Just a bit of an awkward cut :)

[@confused_horse]

@@KevinPowell absolutely great video though! In fact, I've just wasted an hour of everyone at work discussing the concepts you've shown.

While impressive I find the whole construct very complex to achieve the effect. You have various styling across multiple elements which for me hurts readibility and maintenance. I personally would avoid subgrid due to this tight coupling. I think 7 out of 10 front end developers would probably balk at maintaining this css while full stack developers would probably not touch it.

[@KevinPowell]

Subgrid is definitely a trade off, you get more control. I could have done the same thing though, without the `grid-auto-rows` and instead simply given the images an actual height and we'd have the same result, but I wanted to explore an alternative. They are much simpler to use in columns than rows though, imo.

[@grinsk3ks]

good as an example, but I wouldn't do that in real world. It's against component based design.

[@calyodelphi124]

WHAT IS THIS WITCHCRAFT THIS IS SO COOL 8D

[@qeqsiquemechanical9041]

humanity already has quantum computers with its own cryptography, and webdevs still can't solve div centering and arranging. imagine being so screwed up as a field

[@GrimChu69]

These hacky solutions is why css is so frustrating...

[@Dead_Goat]

Ehh not really considering you should never use grid, or grids period. We stopped using tables a LONG time ago please do not go back.