I'm not sure how much longer I can wait!

css is getting to this incredible place there's so many new exciting things coming to it it's actually kind of overwhelming almost to a certain extent all the new things that are coming but despite all that i'm actually really sad about something because i feel like one of the best things to come to css in a long time has just been forgotten about with all these new other cool things that are coming up i want to raise awareness about that so maybe we could actually start seeing some movement and implementation of it and that thing is subgrid hello my friend and friends and welcome back to the channel i'm so glad that you've come to join me once again and if you're new here my name is kevin and here at my channel we learn about how to make the web and how to make it look good with weekly tips tricks and tutorials with a very large focus on css when grid first came up it was just like all the hotness all the browsers sort of just jumped on it implemented it really quickly it was incredible and it opened up new doors to creating layouts that we never had possible before a new level of control it was really really cool but part of the spec of grid was subgrid and they actually pulled that off they wanted to make sure the browsers could implement grid quickly and so they pulled subgrid off to the level two part of that spec of the grid spec the only browser that then made it to level two since then which has been a long time now is firefox firefox actually implemented subgrid pretty quickly after grid implementation when that happened i just assumed the other browsers would pick it up but nobody has and because you don't hear about subgrid at all people don't realize they want it because they don't even know what it is so it just sort of seems to have gotten forgotten about and there's all this momentum behind other things and i just want to show people why i wish subgrid was implemented and we'll be using this month to put out lots of videos on subgrid to show all the possibilities and all the amazing things you can do with it i think that because nobody's talking about it the browsers go well nobody nobody wants it because there's no there's no movement there's no talk there's no chatter there's nobody that's filing bug reports on it there's no one showing interest in it so it just has gotten forgotten about and i want people to get excited about it and push for it so we can actually tell the browsers no this is something we want can you please start putting some resources behind it so in this video it's going to be just a breakdown of the very basics of subgrid and then in future videos throughout this month we're going to be taking it from the simple example that we're looking at this week and we're going to be pushing it into more practical layouts and ways that you'd actually be using it in the real world and the problems that we can run into without subgrid and how subgrid can solve those problems i'm really looking forward to this i really hope that you're looking forward to it as well so let's dive into the code all right so we're going to get started on this i've styled up some basic things so we have something to visualize to speed things up a little bit and what we're going to do is and let's just take a look we have a main grid and in my main grid i have two inner grids that we're going to turn into inner grids in a second uh and then we have these boxes that are inside of there so and everything just has some colors on it so we can see them to make our life a little bit easier and i'm going to come on here and first on my main grid we want to make it into a grid because that makes sense and nothing will change yet so let's come in and create some grid template columns and we're going to create three columns let's do four actually so we'll use the repeat syntax repeat of 4 1 fr and just really quick if you haven't used grid at all you've never touched grid and some of these things might look a little bit unfamiliar to you because grid does do things a little bit different and there's new things with it so i do have a playlist that looks at the basics of grid itself that might be useful before you get into subgrid so if you want to check that out there should be a card popping up now and it's also linked in the description down below and let's do a repeat of four and i'll do 150 pixels here just to set up a bit of a grid we can't see the whole thing but in firefox we can help visualize it in our dev tools so they are off screen just to create some room but actually i'll show you what i'm doing so if you find the element in your dom here you can toggle your grid visualizer on and off and you can also find your grid down here there it is my main grid i can turn it off there in the layout tab in firefox as well and i'll leave that off screen and you can see it's created all those boxes here each one of those is one of my cells so four across and four down just like that and what i'm actually into let's go let's do inner grid um inner grid two just because we are going to modify that one a little bit as well uh in a second and i'm actually going to call this one inner grid inner grid 1 again just so we can have some differences between them and fun fact if you you can use numbers in classes but if you have a class or id that starts with a number it is invalid and so never do that it's one of those weird things in css that sometimes trip people up um so for my inner grids the first thing i'm going to do is let's place them on the grid that we have so we'll do a grid column and i'm going to say 1 over negative 1 for now which means it's just going to stretch the whole thing and both of them are doing the same thing like that and sometimes just because i am in codepen sometimes these grids will turn off and just to make it easier to see everything i'm also going to add a gap here on the main grid itself which separates everything a little bit and so i know with the visualizer there are like a lot of things covering each other right now with the colors i have so i'll turn them on and off just to make sure that what we're looking at is really clear another thing i'm going to do on my inner grid here is we're going to do a grid row and i'm just gonna say span two so we're not overlapping them but each one will take up two so they are falling on the parent grid right now and with regular grid now if we wanted to place the inner these boxes on the inner grid we'd have to go on the inner grid we'd have to create our new grid there and then place the items on that and we sort of have to take that same step with subgrid so these ones are placing it on the parent grid and then what we need to do is do a display of grid so it's now a grid item but it's also a grid parent and you can see that's changed things a little bit and that's just because the default behaviors with grid are a little bit different and then what i'm going to say is grid template columns is instead of actually defining them here i'm going to write subgrid and now you can see that the children are being placed on the the children of inner grid are being placed on main they're using the main grid grid which is really really really cool and then i could take that like a step further and i could say that my box uh 2 is going to be a grid column of span 2 and then they're gonna span two and again they're looking at the parents grid and not they're looking at the grandparents grid and not the parents grid or actually the grids are the same sort of um they're sharing the grid that's happening here which is super super cool and you can do some really interesting things with that one thing that's actually kind of interesting and this is why i made an inner grid 1 and an inner grid 2 because there are a few things where it can get interesting so if i choose my inner grid 1 which is the top one up here there's a few things that we can do so i'm actually going to say that on this one the grid column is a two over negative one so it's going to start at line two and then go to line five and if we do something like this when we're using our line numbers things become a little bit different and actually when you turn on in the dev tools when you turn on a subgrid what it's showing you is the lineup it's going to show you the original grid and the subgrid itself just because there are some differences between them but the subgrid is dependent on the grid itself so it's important to know and you can see that even though the main grid has one two three four five which are being covered up a little bit the sub grid is starting at one so that's something really important to know that can get a little bit confusing sometimes if you're not starting you know if you're doing that you're moving things on the main grid um just that it could run in you know you're not using your main grids line numbers you still are using your sub grids line numbers which is important to know the difference so depending on what you're doing in there so say we did my dot box one is a grid column of one over three this one down here will go from one to three and then the next one is a span two but then over here this is actually breaking things a little bit uh because this is going from one to three and then this one is a span two there's not enough room to span two over on this side so it has to go underneath to be able to accomplish that there's ways we could overlap content because overlapping content with grid is super easy to do but just to show you a few of the the little gotchas that can sometimes come up with things like this now one thing you might actually be wondering let's turn this guy off for now you might be wondering why here they're stretching this entire space when it looks like there's this grid inside of here right so the and even we'll set it up let's say box dot box grid call a grid row is a span one and they're still going to stretch across both of them right now and the reason that this is happening is the rows we've we've only set up the subgrid for our columns so my grid my inner grid is going all the way across this way and it's spanning two rows on the parent but the subgrid is only being applied to my columns right now so even though the main grid has two colu or two rows here the subgrid only has one so if you wanted to take advantage of that you could also go grid template rows and then you could do subgrid here as well and now you can see that both the template rows and template columns are being respected and then you could come and do some fun things here we could do our grid row is also a span two and then they'll start spanning now another thing that's really interesting is you can also take advantage of grid template areas on the main grid so if i come here and i say grid template areas and we'll do a really simple do a one one one one uh across the top and then we'll do a two two two and we'll do a three just for fun i don't even know if we'll use it um but now you can see one one one one two two two two and all of that and that's actually on my subgrid uh so let's turn my main grid oh actually we need more of those so we'll do three um sorry four four four four and then a whoops and then last but not least a five five five five five five um so now we can see all those grid areas are the area names are being defined on the main grid and an interesting thing here is you don't have to do a grid area like we don't have to um declare this because if i come on to my let's do my box we'll do the first one so we did inner grid one and my we'll say the inside of there the box one and i'm being a bit more explicit here than when you might want to but we could actually say that this is grid grid area of two and it's going to move into the two and it's actually overlapping with the other one so let's delete this here yeah i'll just comment this out so if any case anybody wants to play with these a little bit and then we could say that the inner grid 1 box 1 is on the grid area of one and it's going to live in that area of one and one thing that's oh this should be box two sorry about that box two um and what's really interesting with this is it's only using the areas that are in that grid right because remember i pushed this one over so it's this pink box if we turn off my grid for a second it's only using the areas that are within this pink box so it's not going to like pull it outside onto that main grid area it's only looking at the ones that are still named that within this space which i find really interesting and then let's just repeat this at the bottom so my box will just do our two and our uh yeah two and two there we go and so we can see it's a little bit different here and in how it's working but that makes a lot of sense i think and of course this shouldn't actually be one and two though this should be a four and five let's say and you could do something like that uh or inverse them or whatever you want to do but they're going to live in the areas that are defined on the the main grid and not on the subgrid right so i find that really cool we're defining everything on the bigger picture and not on the smaller picture it's really really exciting and there's a lot more that you can do with this i'm going to leave the link to this code pen here and i want you to play around with it have some fun with it again it has to be in firefox and granted looking at it like this is very abstract and it might be like okay i sort of understand how it's working but why should i care about this and why is it important hopefully some ideas are already circulating in your head you could take this link and do more with it play with it a little bit if you want to experiment inside this code pen but also for the rest of this month the other videos that i'm going to be coming out with are going to be using subgrid in more practical ways and showing them in actual layouts and playing around with them in situations where you might actually run into in the real world so if that sounds interesting to you and you want to make sure you don't miss any of those videos and you haven't yet subscribed please do consider subscribing and with that a really big thank you to zach randy and stuart for my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your own internet just a little bit more awesome

Channel: Kevin Powell

Views: 20,583

Rating: 4.9505768 out of 5

Keywords: Kevin Powell, create a subgrid, css, css grid, css subgrid, front-end, frontend, grid-template-areas, grid-template-columns, grid-template-rows, html, html grid, html subgrid, tutorial, website grid, what is subgrid

Id: tX06aPu1aIg

Length: 12min 58sec (778 seconds)

Published: Tue Oct 05 2021