 did you know that you can actually develop using lines that overlap just like that so you can actually see your grid lines or even better see your line numbers or maybe even better seeing your grid area names in this video i'm going to be looking at exactly how we can do this it's all using firefox let's get to it this is so easy to do and i strongly strongly recommend use firefox anytime that you're doing anything with grid because it just makes your life so much easier especially if you're using line numbers but no matter what you can definitely run into problems with grid and this is the best way to do know or understand what's actually going on and why things are going where they are so the first thing you want to do is open up your dev tools you can right click and choose inspect or if you want to impress people with your keyboard skills it's control or command shift c and that will bring up the inspector just like that now once we're in here in firefox let's zoom in a little bit on this i think i can make everything here bigger for the video there we go um we can actually see there's a lot of different things going on um i have my it's showing me where i flex and grid items right here so it's telling me my body is set to flex and my div my div class grid is set to grid uh so that's already really cool that it we can do that now if i actually click on the grid you can see it's actually showing me the grid all of a sudden isn't that really really cool and if i click on it again it turns that grid off so this is one way you can toggle a grid on and off to be able to see what's happening which is really really nice and handy for just really quickly seeing what the grid looks like being able to visualize the grid just makes your life so much easier when you're trying to figure out what's going on with it uh now you can also see here we have the display grid and you can see some lines so if i click there i also can toggle it on and off right here where i see my display grid so that's a second area where you can do that or what you can actually do and i'm going to go all the way back up to my html element here it's actually going to show me um that i have grid so if you have five different grids on a page you can actually they'll have different colors and you can actually control them separately from one another so you can toggle them on and off separately and you can see you can actually display line numbers and area names which is super super useful so let's just turn that back on so that's the same toggle that we were seeing before but now what i can do is i can actually display line numbers oh isn't that magic so when you're trying to figure out what line number something should be going up on that is just the best thing in the world super super super duper handy so that really helps you out along that's probably the most useful feature to me but if you have a lot of grid area names i've put some here that i'm not actually using but i have one and one and then it puts this really thick line to show you the divider and if you had rows and columns uh you'd be seeing the different ones coming up on here with these big thick lines to indicate uh the separate areas to make it a little bit easier for you to see them so i have one one two two and then my area three right there now i can also extend lines infinite infinitely so they just extend forever i personally don't like that i just get messy for me but if there might be a good reason to use it so you could always do that as well one thing that can also be really useful is you'll have as i said each grid in your page will actually have a different overlay here so you can have all of them on or off but if the color doesn't if you had a purple background here it might actually be hard to see those lines so i can click on that and actually get a nice color picker and choose any color i want so to me like a green might work better for my design for whatever reason and then that sticks and that's the color for that grid right there and you will notice there is a flex box option here so i just want to show you really quickly if i go to there you can see that it will highlight my flex container body so i can actually turn that on and get similar thing here where it's showing me um i have my different areas there and they're all coming up in purple now so i have the three parts and it's showing me the flex items so my title is one my grid is the next one and my credits down here at the bottom are my last flex item and then i can get more information if i click on that it will select that item and i can go back and then i can get my title if i want and it shows me um what's you know how it's being set up and why it's working the way it's working which can be really really cool um if ever you need to play around with the flex but i find personally i use the grid one quite a bit when i'm dealing with grid especially for these line numbers uh last thing just really fast you'll notice at the top they're positive and at the bottom they're negative just because you can count this way or if you go with negative numbers you can count that way so if you want somebody goes the whole way across one over negative one we'll actually make it go the whole way or if we look in here at my paragraph here um i actually set the grid column from two to negative one so it's starting at two and it's ending at the negative one over there so if you're learning grid or you're making complex sites with grid i definitely recommend that you use firefox for your development and then if you want to go back and test across your other browsers of course you should be doing that anyway but firefox just makes developing with grid so much easier so i hope you like this video and i hope you learned a couple of things i'm assuming you're already using grid in your projects but if you're not let me know down in the comments below why you're not using grid right now if it's about browser support it's gotten really good so don't let that hold you back anymore there's even ways of using autoprefixer in a certain special interesting way i'll leave a code css tricks article link down below where you can use autoprefixer to pretty much make it work as far back as ie10 which is nuts so if that's something you need you can check that out in the description below thank you very much for watching i hope you like this quick tip a big thank you to my patrons for helping support everything i do here if you haven't yet subscribed and you enjoyed this video please consider subscribing and of course until next time don't forget to make your corner the internet just a little bit more awesome