You can't do this without subgrid

Key Takeaways

did you know that subgrid has been available in firefox for almost two years now and well i know it is not supported in any other browsers and that's super frustrating to me and it's one of the reasons i'm making this video in this one we're gonna be looking at grid template rows and using those on a subgrid and one of the cool things with that is it enables things to be a little bit nicer and to match things up and you can sort of i think with a pricing table or other things you want to make a comparison table it is a thing of beauty but also if it doesn't work and you open it in a browser where subgrid is not supported it doesn't actually break the experience like it might if you're using subgrid on your columns with the rows it just sort of creates a decent enough fallback i think so if you're curious about that stick around hello my friend and friends and welcome back for yet another adventure into subgrid if you are new to my channel my name is kevin and here at my channel i hope you learn how to make the web and how to make it look good with weekly tips tricks and tutorials that mostly dive deep into the wonderful world that is css this is my continuation on subgrid awareness month because i want to show people how amazing subgrid is and how much of a disappointment it is that it is only currently supported in firefox and i'm hoping to show enough use cases examples and different things like that to build up some momentum behind it because if enough people are excited about it and are talking about subgrid the other browsers will start putting some momentum behind it and trying to implement it in this video we're going to start by looking at why grid isn't enough and then what happens if somebody's in a browser that doesn't support subgrid what things would actually look like which isn't terrible it sort of goes back to the not ideal situation but it still gives them a usable experience so let's go and dive into the code and check it out all right so here are my two lists that are using subgrid and i'm going to pull up my grid inspector here because it's going to help us see what's happening where i have a grid that's just pretty much setting up two columns and there's nothing much happening in that grid and even if we did come in and try and create a grid within there so let's say we come in here and we say uh without subgrid and we try and create a grid here and so we do a display uh grid and you know we get some things happening and that's actually we have a without subgrid here and without a subgrid here and notice how they're very different from one another right now and basically that's happening because the default is for stretch so this is trying to stretch the whole space so now like the alignment's even further off than it was before uh so we could come in here and actually say like grid auto rows of say maybe a min content instead of the auto but then it's this is sort of going back to what we have and things aren't lining up and you go oh well that doesn't work um okay maybe we could try something else of how many you know this one has we have one two three four five six here we have one two three four five six seven eight over here maybe that's what's causing the problem so then we say grid template rows and on that we could say that we want repeat of well eight we have eight times and then we could try our main content here again but this is going to go back to where we were before basically exactly where we were so again thing you know the first one lines up and then each one is off by a little bit more what are we even comparing here i'm not too sure the one we can get closest with is 1fr here and so if i do the 1fr you can see things actually start lining up because the stretch is working in the the main lists one so they're the same height so the one fr here it does mean that in these subgrids let's go turn on the inner grid we do have these two empty ones here the issue with this is look how huge and ugly that is right so i'm going to turn off that grid and like this this does not look very nice and okay we could center things within the spaces and we'd be getting closer uh to matching so let's just we could do that here and align items of center would at least line the line them all up in the middle and we're getting closer even though but look at this things are actually off by like a smidgen on this one so those aren't actually lining up and was that the same when it was here that was better there so interestingly enough that actually throws things off and maybe there's some small tweaks and other things we can do here because even here it is going off a little bit now and i think it's because of the um the length of the content and other things that are happening here it just becomes a little bit messy and hard to do even though you think grid would be good at something like this so what i'm going to do is take this whole section here and let's comment that out and then we are left with only our width subgrid right here where we can use subgrid for that so i'm going to come all the way up just to push all that down so we're not worried about all this other css and one thing with my with subgrid here we had our lists and then we had a without sub grid on each one of the ul's we actually had two different lists that were behaving in similar ways and like we saw in one of my other subgrid videos we're looking at grid template columns and if you didn't see that one i have linked it down below in that one what we we saw was this issue that can happen with grids even if the grid is set up identical and used in multiple places they can behave in different ways and that can be a little bit frustrating i have one too many closing you also that's strange but there we go get rid of that one um so i'm not putting the grid directly on this i'm just saying my with subgrid because i want to set up a main grid here and this is the grid that sort of rules them all so let's do that first so we'll say with subgrid and we can do on that a display display of grid which i think makes sense now really important normally what would actually happen when you do this is this would happen where they'd stack one on top of each other and just lower down in my css for this demo i'd set something up so um and that was for the other lists we're looking at it quickly but if you wanted to fix that right here we just do a grid auto flow of column and this is setting these two up to actually go next to one another so if we go and take a look at that grid you can see here we now have two columns because by default grid wants to stack things now i'm saying this parent the children will all go next to one another instead but this would mean if you were to add another ul in here it could potentially run into problems because then it's going to go next to that one and they're always going to go across that way but again maybe that's what you're what you're after and you want something that's going to be looking a little bit more like that as well so you know it depends on the space and everything else that you do have but just why i'm doing that one um and then right now they actually do appear to be the same width but say you might run into situations where they're not so when i do this i also tend to do a grid auto columns of 1fr just to try and make sure that the columns are actually equal with one another and we won't see a change here but this could be just a nice little precaution that you'd throw in there and now what i'm going to do is we could grab u and we want to grab our uls that are in there and i guess you could have a gl a class i've talked about using like an inner grid class or a subgrid class maybe even because on this we do have to once again declare a display of grid but then we want to do a grid template rows of subgrid and something really weird is going to happen when i do this where they all stack on top of each other and this is one of the issues with grid template rows is they all want to because we're using the parents rows what's happening in this situation is the parent by default only had one row to begin with so let's let's turn that off and take a look at our grid and so once again i'll just pull up the inner grid right here actually let's do the outer grid sorry so you can see here we have one item this whole list is what's sitting in there so there's only one row we have a one down to a two here so we have like a grid line one here a grid line two down here for my rows we only have one row and so when we say that we're using the grid template rows and it's using the template rows from the parent we only have one they all stack and this is one of those tricky things with grid template rows on subgrid luckily there's a really easy fix for this um when i was creating this demo i did a really complex solution using some javascript so if you want to check that out i'm leaving this here commented out because we don't actually need it but if ever you needed something that was actually seeing how many children there are so in this case i had two uls i wanted to see which one had more direct children so more list items in it and then i would use that longer one to define how many um how many rows i needed and i was you know so then if you had 10 things you could use that to you know populate and figure it all out but then i had a thought of well do i need to do that or could i just come here and say that the grid row on the ul and this is on the ul itself is a span 99 or just some very large number and that fixes it and you might be going wait why why why would that fix it and the reason that that fixes it is because if we come down you'll notice that from eight we get to 99 right there and that's just because there's no content any any of those ones so they're all just zero pixels tall and it's not actually causing any issues um and maybe you don't need you know if you know you'll never have more than 14 or 15 items you could even do a span 5 and that might be a little bit easier for the browser to do the layout on so you could not push it to such an extreme if you don't want to but as long as this number is equal to or greater than the total amount of rows and the reason i went with 99 is because you probably never need more than that you sort of fix that situation and now we get this nice thing where it's really easy to compare everything so let me turn off the um the grid inspector we had on there just so now we can see that everything is lining up so if i want to compare this one to this one this one to this one you can see everything is just going straight across like that and i i just think it looks a little bit better it's much easier to compare items from one to the other all the way across and for things like that so in situations where you want things to always be even with each other it helps fix that situation and the really interesting thing here is when you're using subgrid with grid template rows you can actually get away with not worrying too much about browser support because if i come and pull this up in chrome right now and we come and take a look well it's back to where we started when we had our initial grid solution and it's not perfect by any means maybe you could do a little tweak just to make it a little bit easier to make comparisons across the board and you could probably do that very and you could even come in with an ad supports if you want to or something like that but for a situation like this i actually think it's not terrible it's a decent enough fallback where they're not getting a broken experience it's just somebody who is in a browser that supports subgrid might be getting a little bit of a nicer experience overall and a little bit earlier i did mention another video where i was saying that with grid template columns we can run it into issues with repeating grids as well like using the same grid in multiple places doesn't always give you the same result so if you haven't seen that video yet it is right here for your viewing pleasure and with that a really big thank you to stuart and randy who are my supporters of awesome over on patreon as well as all of my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome