 Welcome to the CSS podcast where we cover all things CSS from accessibility to Zindex. Today we're talking about subgrid. This has been available in Firefox for a long time now, but since part of the 2022 interop effort, we're seeing more activity in Chromium and Safari as they inch closer to the stability of this feature. This also means that we're getting excited about it and are ramping up our focus on it. So Adam, do you wanna give us a bit of the problem space that subgrid is helping out with? Oh, you know I do. Okay, so when we set display grid, only the direct children are able to access the lines, the rows, the columns, and the areas that are defined. And this makes it difficult or impossible for nested layouts inside of those children to align with ancestors. All of these well-named areas, columns, and grid information that we typed in painstakingly, that's not even enough. But anyway, they're lost on nested layouts and that's the problem, wah, wah. Right, so currently, every time you write display grid, you're creating a new independent layout for direct children. But with subgrid, you can create a new grid layout that incorporates features of a parent layout. So it can depend on that layout to apply styles, enabling more consistent grid systems and pass through grid placement. In other words, without subgrid, you can't place indirect children on a parent grid. So you can't get that consistency of placing your entire nested layout. So imagine like an image gallery within a section on a full page grid or a parent grid. Right, okay, so here's an example to help visualize subgrid. Imagine a grid with five columns. The middle columns, two, three, and four, are a named area of main, where, you know, something, anyway, main. So this named area main spans three columns of its grid like we just described, two, three, four. And with subgrid, the children of this main area can know this and align to the three columns inherited from the spanning. This would be done by the main area setting itself to display grid and its grid template columns set to subgrid. That instructs the nested grid's columns to be those of its parent grid, like it's passing on the lines as its own down to its children. Yeah, and if you actually want to visualize things similar to this, Adam did an article about the state of CSS that includes a visual representation of subgrid that I thought was really nice because this is a hard thing to talk about verbally. It's like pretty visual. So I would recommend checking out some of those links after the show to just see what we're saying, you know? Thanks. Yeah, good call. So here's another scenario. Just imagine a grid of cards where each card contains an image of descriptive paragraph of varying lengths and a footer bar that might have some actions on it. So subgrid can help you align all the footer bar elements of those cards so that the longest paragraphs might set the overall track height. Then the footer children can all be aligned together. So this is a good example of grid template rows subgrid. You can think about all the times your content causes a new line and then your layout just completely broke. So you might have footers with links, cards with paragraphs, chips with usernames, et cetera. All of these things could be mitigated if you have consistency with subgrid. Nice, yep. All those varying line links, right? Where you don't control someone's name, you don't control what someone put in a CMS and they could go to new lines and it just kind of breaks this alignment you thought you had. Yeah. If you take one thing away from this episode though today, it's that subgrid is a value. It often sounds like something else like you'd write display subgrid, but that's not the case. You use subgrid in grid template columns or grid template rows. I'm gonna repeat that because this is the most important part is grid template columns can be set to subgrid and grid template rows can be set to subgrid. Nothing else can and that's the only place you're gonna use the subgrid keyword. It's like deferring the template, right? Grid template columns or grid template rows to the parent. You're deferring it to the parent. Like my columns are my parents' columns. Instead of saying here's a new template, you say get my template from my parent. This also means you can have an auto template for rows, but a subgrid for columns or subgrid for rows and auto-placed columns. Columns rows and gaps are passed in so the spacing stays consistent. So these row or column gaps can be overwritten too. You can just specify a new value on the grid with its columns or rows as subgrid. And I imagine folks will be printing zero for this pretty often. Yeah, me too. And parent line numbers aren't passed down, but the names are and the names can be reassigned on subgrids too, like grid template columns, subgrid space in brackets, name dash one, space name dash two. So you can rename the inherited subgrid columns or rows on the fly for use in this subgrid in a new purpose. I didn't realize you could rename them. Interesting. Yeah. So this does tie a subgrid tightly to a direct parent grid as the tracks of the subgrid are dependent on those of the parent or a subset of the tracks of the parent. And this means that you have to be really careful about having the amount of items that will properly fit into the parent grid, since if you have too many items, you need to figure out another way to handle them, like not using subgrid, but maybe instead defining new column or row templates. Subgrid is not flexible like a parent grid can be. That's important. So in fancy terms, that means that subgrids can't have implicit tracks. They're explicit based on the parent, but the size needs of a subgrid can change the parent's grid track size if the track is sized using auto or something similar. Right. And that's a critical feature. If you've got, we talked about paragraphs being multi-line and, you know, one's a short paragraph and one's a long paragraph. That subgrid could change its track height, changing it for all of the other elements that are, you know, looking at that same track height. And that's how they can all align those footers underneath the longest paragraph. Yeah. Nice. An auto placement isn't the same either. As the tracks are firmly defined by the parent, the subgrid won't automatically create new ones for unplaced children. That's on you. So just beware. Yeah. And I feel like this is like a particularly hard subject to verbalize without showing you. So again, we'll have some links in the show notes I really like the article by Ahmad Shadeed as well. I think it does a really nice job covering subgrid. So we'll link that for you in the show notes. Highly recommend you check that out. But what's cool about subgrid is it does bring web development a step closer to how I've seen designers traditionally work on a layout that usually have a baseline grid. And this is something that we could not really do before. We couldn't really place content within sections, within that grid, on that parent grid. But it's even more exciting to think about combining subgrid with container queries or has or even the LH unit. So we could be heading towards some really cool uniform and professional baseline aligned layouts. Right. Grid template rows is 10 LH or something like that. You can sort of keep and, you know, stay baseline the whole way. That does sound really cool. Yeah. A caveat though to subgrid I want to share is that in order to get subgrids inside things like cards, there's an amount of auto layout you have to give up. And I was just mentioning there's a gotcha but I'm just kind of reminding you again. Like the trade-off means building more complex grids so that lines can be passed down to nested children. It reiterate that again, these grids are more complex and they're less flexible, but they can pass things down to children and you can achieve much greater layouts than before. Anyway, these grids won't be simpler. They're certainly a bit more complex, but if you're into perfect grid alignment, then subgrid is here for you and you can really add that extra layer of polish. Also get good at naming lines and areas because that's really gonna help you tame the complexity. Yeah, one thing that I liked about Adam's example and the article I mentioned earlier is that he had a full-bleed start and end that kind of defined the entire page and main content start and end that just was the content within the section of the page. Say it was like 800 pixels max wide, you know that kind of common layout for blogs. So it was very clear when I was reading it what I was looking at instead of just looking at numbers. So named grid areas are definitely helpful here. That's all we have for Jay's episode. It's another short one. I just wanna thank you all for joining us today. I hope that you learned something about subgrid. Again, we'll share some of those links in the show notes for you to check out. And F, you have any more questions? Yeah, ask them on the show or we'll put them on the show or we will love to answer them on the show. Just send us a tweet with the hashtag CSS podcast. Exactly. I'm at You Know On Footer. That's at UNA. I'm at Argyle Link ARGYLE INK. Your question could help a lot of people. And if you like the show, please give us a review on whatever podcast app you're using or share this podcast with a friend because that's how other people discover our show. And that means that we get to have more time to write up some content for you. Yeah, like we'll make a line height based subgrid baseline grid layout and then tell it to you. Demos are so fun, right? Wish I had more time to just build stuff. I know, it's good stuff. All right, well, thanks y'all. Look forward to your questions. And we'll see you next time. Bye y'all.