3 underused CSS Grid features

Key Takeaways

hello my front and friend there's a lot of cool things you can do with grid a lot of people don't know about some of the more useful ones so today we're going to be diving it in and the first tip is how to create overlapping grid template areas because if you've ever used grid template areas you can do something like this you can see I'm stacking my content uh all I'm doing is saying that here's my H1 has a grid area of title my paragraph has a grid area of text my image has a grid area of image if we look here that's my grid each one goes they all stack uh it's kind of useless at this point to do this but you might want to use grid areas on mobile or I really like setting up my grid areas and then rearranging them the problem is if you try and rearrange them but you want them overlapping there's no way of currently doing that they are looking at updating the spec to potentially allow for this to happen but right now we can't so to deal with that there is a trick on doing it so I think at small screen sizes that would actually be completely fine but then when we get to the larger screen sizes I want to go to like this two column layout instead and position my different things on there and because I've already assigned them grid areas we can do this with named grid lines as well because those create implicit grid areas so let's actually start with the row here because I find the rows a little bit easier to understand or just to visualize a little bit um so I'm actually going to put each row on its own line if you do have prettier or some code formatting going on uh when you save it might undo your changes here but I think it's a little cleaner to be able to look at so an auto at the top a 50 pixels in an auto I'll explain why I chose those numbers in a minute uh but what I basically want is I want this top row to be for my title so we're going to say title start right there and I'll explain why I'm calling it title start after then I want my image to start here then I want my title to end and my normal text to start and then all the way at the very end we want to have my image end and also we want my text to end and let's hit save and see what happens and you can see it's sort of working I have this overlapping thing where my text is overlapping this image right now now it's not perfect yet so let's go and fix up our rows now next our not our rows our columns we can fix those up next uh for this I am going to put it on two lines to make it easier to read but we are dealing with columns left to right uh any we'll see but basically I want this to be my uh title start and my text to start here so that's going to be my title starting where it already is we're looking at this line right there starting the text and the title then after that uh this one actually you know what this one we're going to keep on on one line cuz I find it easier so those both start then I want my title to continue so I'm not going to end that because we're looking at this middle line right now so on that one I'm actually to say that my text is going to end but my image is going to start and then we can come all the way to the end and we can say that my title is going to end here and my image is going to end here and oh my goodness it doesn't work and this is annoying and this is one of the things where if ever you declare some grid template areas your grid template areas will take precedence over uh what you're doing so if you're using grid template areas in one place and then you want to sort of replace them with your named grid lines in another place just come and do grid template uh areas and we can say that this is actually you can say none or you could say this is a revert or whatever you want this is actually potentially just going to cause everything to overlap if you're not setting all of this up CU it you still have everything being assigned to grid areas so just be a little bit careful with doing something like this but now you can see everything is working right everything's overlapping so I have my title starting at the top going across the First Column and into this second column right here and then into the second row that's right here uh and that second row is 50 pixels tall then I have this one that's only living down here at the bottom because that one is my uh text start and then the text end so it's going from this line to this line and then my image is also working and then the columns are getting set up too and then just in case you're wondering with like title start title end grid is smart and CSS is smart in this it knows if I'm doing a start somewhere and an end somewhere else that what I'm actually doing uh is saying that this is my title and I'm just saying where the title is starting and ending uh so you can name your lines like this and it's going to work even if you have grid columns or grid areas uh with just title text and image so it's smart for that and it's creating in implicit grid areas allowing me to overlap those different items it's really cool uh it's actually much more powerful than what I'm doing here uh and I think it's pretty neat um and if we turn off that grid that I turned on uh you can see it's showing up right there we get this cool little overlapping thing show you another little trick here cuz this is a bit annoying um that we're floating so if I turn my grid back on it's actually caused by the padding on here so what I'm going to do is actually go find the original Parent here where I had some padding set up and cuz I was using a clamp so I'm going to take the padding that I had which is creating that Gap there this is not a a trick for for grid but just in case you end up with this type of thing with grid I'm throwing this in here and I have another bonus fact thing that we're going to do in a second uh but we're just going to say that the margin bottom or we'll we'll do a block end so we do with the logical property uh and I'm actually going to do this as a cal and the reason I want to do a cal is because we're going to put the clamp there and do times1 and by doing * ne1 it will pull it down into that space uh and then that's looking pretty good the other bonus tip here that I'm going to do uh is you might want to Shadow on that to make it stand out from the text a little bit if you try a box Shadow uh it's not going to work right let's just say 0 0 one REM black so we can see it uh or let's do red so it stands out more and we get the shadow on the outside but as long as your image has actual transparency in it like mine does instead of a box Shadow what you're going to want is a filter and a drop shadow uh instead and then you can take that same one in here here the only problem with uh drop Shadows is you can't do the spread um on it but uh that's in this case is not looking too good but let's just say this drop shadow is we'll do 0 0 one REM and maybe a black on there um and you can see that uh it's working pretty good again if I did that as there we go it's you can see the red coming through but we'll do it as black um and you probably would want to play with that to make it look a little bit nicer but it's better than nothing and uh another thing actually really fast here if you're like why I wish I could read this text T and it was actually above his head I think it's going to look a little weird I can actually come on this and do a z Index this isn't an actual grid tip uh and I can pull the text in front because with grid you don't need positioning to be able to do it Zed index is available within grid uh so if you have overlapping content which is easy to do with as we just saw either line numbers or what I liked or what we just looked at here um so that is an option that you can do it wasn't one of the tips I'd plann for grid but I just thought of it so I thought I'd throw it in there uh that you have access to your Z index now my next tip does actually involve positioning though so let's go over to my index here and I'm going to add at the very top just going to throw in this SVG here and by throwing it in there it's this car that's showing up over here you be like why is it coming at the bottom and actually let just uh or we'll select our SVG here so let's come and we'll do our Sim raser uh SVG and let's just give it a fill of white for now so we can see it really easily uh and the reason it's going down here is because all my other grid things were defined and told where to go so it's just going to the next available cell so once again if I turn on my grid and we just go take a look you can see it's just going to the ne it's created a new row cuz it had nowhere else to go and it's going there but we can actually do a position absolute on here and then let's say I wanted it to be I don't know why but I want it to be by his head uh and this isn't where I would leave it let's spell position right to make this actually work um so there we go we can see it's out of the flow and I could magic number the way over to here but we we can actually assign it a place to go and you could do this with the named lines like I did here if you really wanted to but I can also because I have a position absolute and this is this is a cool thing uh let's just say that we're going to do a uh grid column of let's just say we're doing the text end so we can actually use like the name so it's going to line up with the text end that I created originally uh and then we're going to say that the grid row is my uh image start and again you could use your line numbers or whatever you want it along the way and that guy is actually living within this cell right now so I could actually say something now like justify self end and it's going to line up at the end of that column right that's kind of neat uh and actually Let's do let's just line him up um on we're going to move this around a little bit just to show let's do the title end instead uh and for uh title end I said so it's coming down but then I'm also going to line them up at the beginning so we'll say a title title title start for the column um just cuz I want it within this cell just to show you like justify self end and I can do an align self and and it's going to go down to the bottom or Justify self start and it's going to go to the start and I could just do you know Place self Center and it's going to go right in the middle of that individual cell or if I had that spanning over two columns or whatever it would be centered within those two columns position absolute and grid works so well together and if you did something like a let's do our position absolute let's do a play self start and then we're going to say a top of one REM it's going to go down one R from where it was or two REM and it's going to go down two REM from that cell that it was within there are times where position UPS can be hard to Wrangle and stuff but when you're using it within grid placing it within individual cells or across a few cells and doing what you want with it it can actually be kind of cool and handy so let's drop the opacity on this guy to like a I don't know 0.25 or something so he doesn't stand out as much um maybe we can even then say that this has like a width of 100% um just so he's filling up sort of the available space and maybe this even gets dropped down to a lower opacity uh and we'll do a left of -2 Ram or something I don't know just so he's a little bit more subtle and a little bit off to the side um because we need more more cars in this ridiculous example that we're doing um so there we go uh I think that's looking okay and the last thing I want to look at which is something people don't realize and please don't do it how I'm going to do it in this video um I just couldn't think of a good example but you can animate grid template rows and grid template columns so let's actually take this entire declaration and let's come down here and say at Key frames and we'll just call it uh cars go Zoom because why not and let's just say two and two is the same as the 100% uh key frame so I'm going to bring in the exact same grid template rows I had but I'm just going to change this middle one to 100 uh and I'm going to talk about the downsides a little bit of this animation um as we go through this uh but different ways you can use it that might not cause these problems uh as well uh but let's just come here now and I can say animation that's my uh cars go Zoom uh that should be on my SIM racer I was wondering why we were getting an error there we go uh so that fixes that so cars go Zoom let's just say 2 seconds uh alternate infinite I think will work out well and let's try that and just so you can see the the full thing that's what it is and there you go my grid template rows are animating and he's bouncing up and down now let's just do an ease in out maybe just to balance that out and maybe make it 5 Seconds to slow him down a little bit uh and he gets on his little bumpy road or something and he he gets to move around right and so this is really cool you do want to be a little bit careful with it cuz what this would actually be doing is causing a lot of repaints everywhere if I had other content after this right um um if we did paragraph time 10 with some lauram in there just so we have some content um all of that content is going to be shifting because that other thing is changing in height uh which could be a problem this could potentially lead to Performance issues is like all your other layot stuff could be changing uh so you do want to watch out for that a little bit um if ever you're doing this especially I I think this you know if someone who's trying to read this content I think that's even worse than the repaints CU you wouldn't be able to read it so maybe don't do your rows Maybe columns you could do some interesting different things with animating your columns uh instead there is one other thing with this is you cannot animate if one of the units is an FR so just for fun if I try doing the uh let's just say I change this to a 1fr instead you'll see that it's not actually animating now and in Oh see it's it does this weird thing that's I was waiting for it to sort of kick in it sort of works and then it sort of doesn't um I think what's happening is the FR it's um probably a discretionary or discret animation meaning the animation's only like it's jumping to that halfway through so it can sort of do half the animation and then it just it breaks and it doesn't work so uh it'd be cool if we could do animations with FRS actually one thing I don't know let's try this I didn't think of this ahead of time uh I don't know if it's from one FR to another FR if then it can animate it doesn't look like it so don't animate your F FRS you do need actual like values that the browser has a little bit of an easier time with um but as long as you do that you can do it for your columns or your rows just again be careful to make sure your content is readable you're not causing problems but this does actually open up an interesting door because while FR doesn't work you can use this trick to actually animate from height zero to height Auto which is something that they're working on bringing into the spec but it's not really there yet and if you'd like to see how you can do that to get this to work well I've actually covered that in a previous video that you can see right here and with that I would like to thank my neighbers of awesome Tim Simon Andrew and philli as well as all my other patrons for their monthly support and of course course until next time don't forget to make your corner of the internet just a little bit more awesome and also let me know uh do you like the new theme that I've I I I'm using new font new theme let me know in the comments below if you liked it