CSSGR.ID - An Easy, Interactive Way to Learn the CSS Grid

Key Takeaways

hey everyone Gary Simon of course zetro and today we're gonna take a look at the CSS grid and I've covered this in depth in other tutorials on the channel make sure you check those out you can do a search and I'll hopefully remember to link them in the description although I'm gonna be way on vacation so I'm not sure we're going to get to that but basically today we're gonna take a look at a really cool 100% free web-based tool called CSS grid or CSS GRE ID which is the actual URL from which you can access it there we're gonna take a look at it shortly in the screencast but basically it allows you to do two things first it's an educational tool to help you in a visual sense understand how the CSS grid works and it also provides you with the CSS code that will help you structure your layouts so the second thing of course is to help save you time so if you're not really familiar with all the CSS grid properties I this way you can actually just see all the containers and manipulate them how you want to in an easy-to-use interface and then just grab the CSS grid code alright so we're gonna do that from scratch and we're also gonna take that code that we grabbed and do something in our own project just to show you how it works and how easy it is to use we're also going to make it responsive because by default the CSS grid properties that are shown aren't necessarily responsive so I'll show you how to work with that as well alright so make sure you subscribe here if you haven't and check out course cetera comm so let's get started alright so here we are at CSS G our period ID so just a unique clever name and this is how it's set up so over here is the preview in terms of the layout and each one of these are just referred to as being items and really they're just containers for content and then over here is where you control it in the properties section so we have the number of items of course everything's real time here if we want to change this to seven for instance it'll automatically update the number of columns right now you could see everything structured in three and also we have a grid gap which is the space between them and these are all just in relation to specific CSS grid properties so if we want to change is say for instance 250 and it gives a nice thick amount of grid gap and then also if you have a fixed width layout that you want to use you can specify here say 1400 pixels or maybe just so we could see it better I'll choose 800 and you can see how it aligns up so I'm just going to remove that here so let's say for instance I we wanted to create a layout that has seven different containers but we want to be able to fine-tune them all right so say for it's it's this item one right here we want it to I to occupy two rows instead of just one well we can click on it and we can notice that we have this selected item property so notice it says items plural right here so we can select two you don't have to hold shift you just click on them and it selects them automatically and that way you can control the properties of multiple selected values assuming they have the same values over here so the properties that you can control are based on column span so how many columns which is to the right will it occupy let's say okay three or and also how many rows so if we take us back to one and we want it to go to rows we can see it automatically aligns everything up correctly here all right so I we can also fill this stuff up with lorem ipsum text if we kind of want to have a little bit more content just to see what it's going to look like and then finally we can click a get code right here which provides you with both the HTML of this example in the background and the CSS and as you can see the CSS is really minimal when we're working with the CSS grid which is really ideal but of course you know the the entire purpose of this tool is to make it quick and easy to set up in a visual manner the CSS grid as well as understand how these properties work so with this said let's say for instance we want to have a little bit more of a dynamic layout so safer here this item right here we want it to span all the way across well we would take it and let's say rowspan here instead would say or not Bros band I'm sorry columns band will be e - all right there you go so let's say for instance we're happy with this current setup well how will we go about integrating this into a web page a very simple so what we could do is choose get code and we'll copy all this HTML and now let's real quickly set up a real quick project in Visual Studio code all right so I'm opened up into a new folder and just a folder called project there's nothing inside of it so create that folder and then we'll do an index.html and also a main CSS and in our index.html here in Visual Studio code to get the exclamation point hit enter some quick boilerplate and then we'll reference our our CSS file so link alright rel equals stylesheet here and then href is main CSS I'm not going to worry about having any type of you know live reloading or any type of tasks Automator so now we take that HTML right here I'm going to hit ctrl B and then just paste this in save it I'm gonna go back to our main dot CSS and then right here we'll copy this stuff and we'll paste it in so now control B right click reveal an explorer I'll just go ahead and double click that in there we go looks ugly so let's real quickly just so we can visualize the containers themselves let's go back to our main CSS and let's get out of there and real quickly I'll just add a couple real sets we'll do a body rule set up here alright so margin will just say 30 pixels and we'll have background color let's see here RGB 240 240 240 just a very very light gray and then font-family to get rid of that ugly Times New Roman serif font or sans-serif no sooner fraud will do Mont Seurat that's one I have installed already and then let's see here we're gonna reference real quickly the divs inside of here the actual containers so we can just do that with div div make these background colors white and we'll add padding like 20 pixels or so inside of them alright so now if we go back to our page here now we can see what's happening and this is basically exactly what we have set up right here in this section now it is not responsive obviously so how would you make this thing responsive while using that tool still alright so there's just a couple considerations but what we can do is we'll say okay we want we want to adjust the layout of these items are these containers for a tablet view or some something like that so let's just drag this in we'll say this is around the viewport size right here that we want and to make things simple we're just going to change one thing right here all we'll do is just take this and take it back from our roast ban from two to one alright and then this one will make the column span three okay so it's a little bit more simplified now for a kind of like a tablet viewport so now we can go ahead and get our code and we're not going to mess with the HTML we're just going to copy the CSS real quick so we'll go back to our editor and create a media query right here so we'll say media and max-width 900 pixels and then that's where we paste in the new code now this is not going to work and that's because based on the changes that we made in the CSS grid tool it changed the HTML class properties so there's no row to and call to if we refer back to this we can see there's just a span call 3 so what do we do now well we just have to simply match up and change the CSS rule sets to account for this so and what we'll do is go back here real quick and simply change span call 3 just to two and no it should work so if we go back here to our a prior to project right here I'll refresh this so we come in and there we go the breakpoint happens right there and now it's consistent with what we have in our CSS grid tool so let's do this one more time just to get a little bit more muscle memory and we'll say about like a smartphone size something right here this obviously is not very effective so we need to go down to at least two columns maybe we'll just make everything one alright so in that case what we can do is still we have seven items how many columns are we gonna have well let's just choose change this to one so now we can go ahead and select everything all right and now I know they say one right now for the column spam but we need to update that and then it'll update just change it back to total one again and there you go so now get code we'll see it's even more simplified there's no classes it's simply just the grid rule set right here for the class so now we can go back and we'll say at media whatever I you know whatever you want to use will say 675 and then we'll paste this in but right now these this span - and the span row tube will still be applied so little it won't work what we need to do is reset those so we'll say span row - we'll say grid row that's the property that's used above we're just gonna say Auto and then shift all in the down arrow key will replicate that we'll just change this to call right here and that's the other class this is a column property as seen above and then we'll change we'll leave that at Auto as well so now we go back there we go and refresh drag this in there you go here's the the tablet size and then finally the full size right here alright so hopefully you now have a new tool that you can use to help you understand the CSS grid if you have been struggling alright make sure you subscribe here if you haven't and I'll see you soon