#FutureCSS - The CSS SUBGRID is Awesome!

Key Takeaways

hey everybody what is up Gary Simon here so today we're gonna checking out some future CSS and it's very very future CSS unfortunately and that is CSS sub-grid all right so the CSS grid if you're not familiar with it you can do a search on my channel I have a lot of tutorials and crash courses on the grid just the way to structure your layout the latest and greatest way to do so but there's something called sub grid which addresses a problem when it contains or when it when it when it pertains rather not contains when it pertains to having nested grids and trying to line those grid child items up with the main grid that sounds really confusing I sure it is but it will make sense if you stick with me and watch through the rest of this tutorial so you can see what the use case for it is what the problem is and how the sub grid actually solves it now here's the bad part like I said it's future CSS if we look here at can I use com it's only at three point four seven percent which sucks as you can see no other browsers support it with exception to Firefox so Firefox we're gonna be using Firefox to demonstrate this I will also show you what our result looks like in Chrome and it does break the layout unfortunately but again this is just you know a type of series I like to do to show you you know what the future of CSS will look like and that way you'll have you know kind of a at least a little bit of a jump start when it is made available to other browsers so as always subscribe and let's get started before we begin this video sponsored by low note now as a front-end developer or a designer you know that you need a personal portfolio and if you use a website builder like wicks or Squarespace they lack total customization and they lock you into using their platform but to be a pro you need to use the tools that the pros actually use so level up start building your own projects and your own portfolio on an enterprise level content management system like WordPress there's Drupal now real web development sometimes requires knowledge of spinning up servers managing domain names and setting up an occasional staging environment and there's no or simpler wage to learn the ins and outs of hosting your website then with Lenovo out hosting the note cloud hosting makes it as easy as possible for you to deploy a WordPress or Drupal website in seconds with a freely note one-click app marketplace so click on the very top link here in the YouTube description to get your free note account along with $20 of free hosting and all the tools that you need to build enterprise class websites alright so we're just gonna get started here I already have a little bit of code set up of course it's very simple we see that we have an index study HTML just quick boilerplate nothing happening too much inside of here oh we need to link up I forgot to do this my CSS main CSS file so in our CSS folder we have that main sass that I'm using we're using live Sask plug-in along with my index dot HTML open with live server which I already have going and you can find that stuff here live stats compiler if live server if you want to follow along whatever so let's go ahead and let us get our HTML markup first of course is very quick just not much I'm gonna be using em abbreviations I have a tutorial on that a crash course or it to search on my youtube channel for that Emmit emm ET it just makes HTML and writing it quicker so we have a class of container and we're gonna have a section here with a class of top and then inside of there we're gonna have an h1 element that says hi ok whatever no big deal and then also we're gonna have a second column just with a paragraph that says a class called side and we'll just say whatever literally whatever I'm horrible at ad copy anyhow um so okay what we have here is gonna be a great container and just going to have two columns one right here one right here alright in our container right here is going to be a display grid and it's also going to have 12 different columns and we will use our CSS grid properties to make this span a certain number of those columns and then this one a certain number as well so there's no nested grids happening here this is just for reference so let's go ahead do another one just beneath it because this is a real world you know scenario in which it would be helpful to have the sub grid so another one I'm underneath it so we're gonna have section right here with a class of bottom alright so we have top and bottom and inside of there the very first inside of that column rather we're gonna have another class called content and we're gonna wrap in an h1 my title and then we'll also do a paragraph of lorem like 12 so like 12 words of lorem ipsum text all right outside of that there will be another column alright so we're gonna do image source equals images /bg dot jpg I don't yet have that but I will get it there momentarily and then also outside of that oh this was supposed to be inside of that section I'm sorry so what we have here is a little bit confusing right now we have a container here it sounds like something just broke up there we also have a section here which is going to be the left column of this particular grid container inside of this this right here if div class bottom that's going to be another display grid and that's where we're going to target our sub grid on and the sub grid will translate to this right here and this is going to be its own column and then this will be another column inside of this grid right here if that makes sense but don't worry once I start showing you in the browser it'll probably come a little bit easier outside of this we're just gonna have an aside like a sidebar so we'll just do h2 sidebar that's it this is all our markup is to demonstrate what's happening here if you're confused don't worry like I said when I start showing you the result here in the browser which is what this is what currently is this crap right here this should start to make more sense all right so now let's get to the fun stuff the sass or the CSS rather so the first thing we're gonna do is I'm going to just put in some quick body stuff here so margin:0 gonna reset the disty row font family I think we'll use new neato I have that stalled and I'm also a height of 100 viewport height also our image we're gonna do width of a hundred percent our h1 will do a margin of zero yes I'm looking over here because I have a code reference monitor trust me you don't want to see me doing this stuff on the fly I'll screw up and I'll just be boring right here for container we're gonna do like I said display grid and that's our first element and this appears twice right here and right here alright so display grid we're gonna have grid template columns repeat twelve Auto so we're doing like a a twelve column grid alright so this is a common thing especially this has been around for a long time sometimes there's sixteen sometimes people prefer to use that you know bootstrap I think it's like one of the first frameworks to make use of I you know grid based columns and stuff we're gonna do a whip here just a flat 1200 pixels I'm not making this responsive this is just for you know demonstration purposes and then we're gonna do margin:0 and auto just to Center it alright so here's what we have so far very ugly yes it is indeed all right so let's reference our first element by the way I'm gonna go ahead and pause and get that image in here real quickly you know what maybe I won't pause I'm just so lazy I'll talk to you while I do this so I'm gonna reveal this file over here copy that we're gonna go to sub grid we are going to paste it in there we go I didn't even have to stop okay so we just have a background here it's just some weird image here okay so let's see what it looks like now okay still ugly you don't know what's going on alright so first let's take our top our top element in this our top one isn't really pertinent to the purpose of those tutorials it's not gonna have the sub grid in it but I'm just gonna do display grid we're gonna do grid - column and one it's gonna span the first column all the way to the fifth column remember there's 12 of them here by default all right so what that'll do it does not get something to be too visual at this point because we have from back we don't have background colors yet but you'll see in a second we're gonna do a background of block here so background black we could see what that did so if we remove this you can see it changes if we all of a sudden we bring that back it gets wider now I'm using Firefox so let's hit control shift I will get out the dev console and over here very it's kind of hard to see yeah I can I can increase this stuff so you can see it better we can see it gives us the option to the overlay grid all right and it'll it'll let us do this to any type of grid container that it finds and it has options like display line numbers display areas and all that stuff it's kind of hard to see right here but you see from one all the way to five see if I can increase this a bit from column one to column five that does now span that amount all right so also we're gonna make a color white height we'll just do like 30 viewport height and padding will be 1.5 m units so this is what that looks like now all right so now let's focus on oh yeah by the way I have a paragraph of side right here so let's just I'm gonna copy and paste that rule set right here it's going to go from 5 to 13 it's gonna say background yellow margin:0 padding:0 way up alright okay so what we want to do now is focus on this one whoops say for our purposes we want to have I where it says my title in this lorem ipsum this is all inside of a development with a class of content we want on that to be like right here and then we want this image right here to start right here at this fifth grid column okay that would be hard to do because the way this markup is written is we have a embedded display grid inside of here so these elements won't translate into I the the columns that are defined on the parent grid so that's probably a little confusing I'll show you what I mean though so let's let's let's define our bottom grit here so we have our bottom we're gonna say display grid now remember bottom is a class that's attached right here so we already have a parent grid here's our second grid so it's going to be another grid and we're gonna do grid - column one through nine all right so now we see this situation right here let's go ahead and I'm gonna put in content and our content remember is holding our h1 element in the paragraph element whereas a grid column one through five will do a padding of 1.5 m units and we're also going to take our image which is also a child element inside of that secondary grid we'll say five through nine all right so what we have here by the way let's fix this aside right here I want to define that real quick before I really get to the meat and bones of this tutorial we're gonna do grid column 9 through 12 and then we'll do a padding of 1.5 n m units and then our h2 will say margin zero just get rid of any of the margin all right so this isn't really quite working out the way we want it to we want this element all the way over here right so there's a way to do it and it involves a lot of math and it's annoying right the way to fix this is to put grid template columns sub grid now if we save this it does it work and of course that's how life kind of works sometimes so let me make sure I'm getting all this markup correct oh yes and I figured out the issue this is supposed to be not Otto but one fr a fractional unit there we go so let me just back up real quick and I want to remove this this this right here just to show you what it truly looks like we can see it's off all right this isn't what we want because we want you know the aesthetic and the flow of our layout perhaps this is what a UI designer provided us as a front-end developer for a mock-up and we want it to be pixel perfect we want this right here to be inline with this column but that's hard to do because this we don't have the access we don't have the use of the sub grid right there's ways to do it and it involves like I said a lot of math to figure out how to position these correctly but with the sub grid property we can fix all that so we bring it back save it and there we go so the width and the columns and by the way this all applies to grid template rows as well so columns is you know stack like this from left to right right to left and then columns you could put sub grid on grid template rows would be vertically stacking them in the same type of orientation I don't have to show that variation as well because it works exactly the same way so we can go ahead and for instance if we want this one to start right here we could do that so what we can do is we'll say content where as I say or image yeah we can just say set a five to nine you can say seven to nine there it goes it works perfectly and it's in line with the parent grid up here so we could do like for nine there we go I mean we can do you know five to eight and it just works perfectly now also just to show you what this looks like in like Internet Explorer for I mean I didn't explain what am I talking about Internet Explorer I'm so used to things breaking in an hour Explorer I just say Internet Explorer I didn't mean that what we're going to I'm going to place this in here this is what it looks like unfortunately and Google Chrome it doesn't work there's no sub grid support at the at this point in time for Chrome all right so again if I go - can I use sub grid there it is we'll see like I I'm going to show you at the beginning it's only at three point four seven percent but hopefully Chrome gets it integrated because as you can see it's very helpful all right so hopefully you enjoyed that you learn something new of course you can't really use it right now but you know you'll prepare you will be prepared when we get to that point in time in which you can use the lovely and very exciting sub grid make sure to subscribe if you haven't click the Bell notification icon and I'll see you soon goodbye [Music]