Create a Custom Grid System with CSS Calc() and Sass

Key Takeaways

hi everyone in this video I'm going to show you how you can use flexbox and something called CSS calc which lets us do math in CSS it's really cool we're going to use both of those to build out a full grid system once we finish that up I'm going to show you something even more incredible how we can do the exact same thing using only four lines of code in SAS hi my name is Kevin and here at my channel I bring you tips tricks and tutorials based on web development and design every single Wednesday now I just finished wrapping up a big tutorial series on how to build a responsive website from scratch I looked at my whole workflow and all of that and in that series I did build out a grid system for the website but it was a really basic grid system it wasn't fully involved I didn't need very much in that one and I thought it was missing out from that series it's something that could be really useful to you guys because in larger projects often you want a large full-on grid system the little thing I built last time just wouldn't hack it so when if chitter chatter let's jump right to it now as you can see on my screen now this is in codepen so if you want to see play with or copy the code you can use the link down in the description below to find it for the CSS version I'm going to be using calc this lets us do math in our CSS which is awesome the other nice thing about it is we can mix units so to give you an idea of what I'm talking about let's just look really quickly here I've already done my markup so all my HTML is there really really basic I have a container I have a row and then I just have a whole bunch of columns in there in my CSS all I've done is put a background color on here and change my box sizing to border box and that's it very very simple I have a little comment down here that we'll explore in a second but let's start by looking at our container I'm going to start by giving this a background of light blue just so we can see the container and see a little bit of what's going on with it so normally what you'd see with a container is something like a width of 90 and then maybe a Max width of 50 Ram or something like that and of course a margin zero Auto to center it now this is fine and there's nothing wrong with that but I just want to give you an idea of what calc does and one thing you can do with this um because it's ninety percent the margin on the side is always changing which might be a good thing depends on your site but it gets smaller and smaller and smaller or bigger and bigger and bigger and obviously there it stops but what we can do is instead of saying 90 I can use the calc thing I've been talking about this whole time so to do a calculation in CSS you just put in calc there and then put parentheses and then all the math goes inside of here and I'm actually going to say a hundred percent and I'm going to subtract 10 REM so there you can see it worked now what it's doing is it's taking a hundred percent and it's subtracting 10 REM from the total width so it's going to subtract 5m from this side and five Ram from that side pretty much and the cool thing with that is it's always going to keep my margins the same no matter what it is at my screen size now 10 is a little bit big but it's fine uh just for demo purposes here and you can see that no matter what's going on this and this are staying exactly the same so if that is something you're after this is a really nice and easy way to achieve that now on to what you're really here for just really quick I've put this this is for demo purposes only I would never do this in my actual CSS because it makes my columns just explode if you haven't seen a selector like this I'm just pretty much saying this is an attribute selector so all divs that have an attribute of the square brackets let you choose attributes I have a class and this means it starts with or that is prepended by column hyphen and since all my columns start with a column or col hyphen anything that starts with col hyphen will get these properties and I pretty much just put these on here so we can visualize and see my columns I'm not building out a full website I just want to see I just want to show you guys how we can build this column system so uh let's start with just doing a row because our row is very important to do I'm going to do row and we're going to do display Flex on there so it's flexing and that should bang they all work and really important is my Flex wrap of uh of rap it's going to say no wrap but we need a wrap on it by default Flex things will spill out the sides we don't want that to happen if it gets to the end we do want it to fall down and now we can start with my column system so I'm going to start with the column 12 because it's the first one and this is the nice easy one with or not width I want to do a flex let's go with a 0 0 100 percent and there we go it takes up 100 and just to show you if I take this Flex wrap off [Music] they're spilling out the side which we don't want so that's why I'm putting that Flex wrap on there now the column 11 is where it gets more interesting so we'll do that one next I'm gonna do a flex and flex the shorthand this is a flex shrink Flex grow and flex basis so Flex basis is the size of it the grow is how much it's going to grow and the shrink deals with how it shrinks I just pretty much want to make sure it's not shrinking or growing so that's what the zero zeros for so we're going to do a flex of zero zero calc and my calculation in this case is going to be 100 percent divided by 12 because I have a grid system of 12. so that's taking up there's my 12. and in this case I want it to do 11 on 12 like I want this total here to be oops uh I want the total width of this to be 11 on 12 of my grid system right so the easy I've already got it down to 1 on 12 by doing this and then all I'm going to do is multiply it by 11. and there we go it's taking up 11 of 12 units on my grid so now I can come in here and I can do my column of 1 because that is the next one that is here and on there we can do the same thing Flex of zero zero calc and it'll be 100 divided by 12 times 1. you probably guessed that one and we can see it's working out really well and let's come in here and do a column 10. and that one will be a flex of zero zero calc and I'm guessing you see where this is going but I'll show you anyway 12 times 10 and that's now taking up 10 and one last one just so you make sure you know what's going on a flex of zero zero calc one hundred percent divide by 12 times 2. and there we go you can see it's working I'm going to build the rest of it out but I think you probably see exactly how I'm doing this I just take whatever number I see here and plug it down there so I'm going to fast forward this while I work through it awesome so you could easily expand this out using media queries and whatever else you'd want to do with it and obviously if you needed a different grid system you would just change this this is how many columns or the how many grid columns on your grid you want and then that's pretty much it it's really nice and easy but if you think that's cool let's look at how we can do this with only four lines of code using SAS and something called the for control directive and when we do that we can also set up some offsets using only two extra lines of code so right here I've set up the basics now if you've never used SAS it's really really awesome it's a preprocessor it lets us do more stuff than what you can do with normal CSS but it always has to Output with CSS you can see here it is set to SAS you'll see that there's no curly braces and stuff like that you might also be used to a CSS which is um a lot like SAS if you're not sure Link in the description below to learn a little bit more about all of that now where this is really cool is I'm going to use the four control directive if you've ever done four Loops of JavaScript you'll understand this right away and if you haven't this is a little bit more advanced SAS it's not the basics of it but if you've never used SAS this will probably want to you know give you the urge to want to learn it because it's really really cool um so I've already set up my road just like everything else up until now has been set up the way we've been doing so before I really set everything up I'm going to say I'm going to create a variable so I'm going to say columns is the number 12 because I'm going to have 12 columns in my grid system and now what I want to do is set up my four so at four and then I'm going to say uh dollar sign I so I'm creating a variable of I and we're going to say from whoops one so from 1 through our variable of columns so it's going to cycle through and it's going to run something so it's going to start at one it's going to do it and it's going to do it again at 2 and then it's going to do it again at three all the way until it gets to the number 12. now I could technically put the number 12 here and it would work fine but this one extra line just gives me a lot more versatility and I'll show you what I mean by that once we wrap up this whole thing um so now what I need to do is just jump down onto my next line and I need to tell it what we're really doing so I'm going to say dot column hyphen so every time it runs through this I want it to create a class in my CSS so it's always going to start with this but then what I want to do is I'm going to have to do a pound sign or a hashtag and then curly braces and inside the curly braces I can put my variable of I so what this means is it's going to run through all of this and it's going to do it for number one so the first time I is equal to one so it's going to make a column hyphen one and then it's going to make a column hyphen 2 and I'll type in 3 and it's going to do that all the way up to 12. now for each one of those I want it to set up my Flex box right or my Flex grid so just like before zero zero but now what I want it to do is where it gets a little bit more interesting so I'm going to say a hundred percent [Music] divided by my columns [Music] times [Music] dollar sign I and oh my goodness it worked look at that I'm finished four lines of code including setting up my variable and it's done it just happened like magic and you might be going what just happened and it's pretty simple um again if you're not used to this it might be a bit weird but let's go look at the compiled CSS so this is what the computer is actually seeing let's get rid of that let's go down you'll see also that we do have the you can see here uh We've it's we've added on all our prefixes and stuff but it's set up a column one with a flex of zero zero and then eight point three three percent column two is there column three and it's just gone through all the way and gone up to column 12. super cool now what it one thing that is really important is you'll notice I didn't use the calc in here and the reason I didn't is we can do calculations natively inside of SAS and this is the same if you're using scss and if I use the calc thing that we get from CSS it wouldn't let me use these variables and these variables are what are making it all work so it's really important that in this case we're not using calc so uh one that the other really cool thing with this is it's all built up with the idea that it's super easy to change now so if I wanted a grid of 16 I put 16 and now it's working on the 16. so this is a full grid of 16 and it's all just working out like magic I could change this over to a grid of four and it's not going to work perfectly because things are going to screw up but you get the idea I just need to change what I see here let's just change that back to 16 for a second and look at the compiled CSS and you can see the numbers here have all changed accordingly and it's going to have run through all the way to 16 now just like magic and if I changed it to 100 it would run through 100 columns and set it all up properly for 100 columns so it does give you a little bit more versatility you can come through and change things a little bit easier let's change that back to 12 so my system is actually working properly though and I did mention that we can do offsets with just one extra line or two extra lines I should say so I'm going to say a column offset of the same thing I did before I and all I have to do now is say that the margin left is equal to 100 percent divided by exactly like we did before columns times dollar sign I and with that let's just come in here and add after this six we'll add a new 6 in here so that should pop up at the bottom and let's add a column offset of two and that should just bump over by two there we go I could change that over to a one I could change that over to 86. the whole thing just exists it's now there if you check the compiled CSS it would no my whole system would be there the only thing here is it will create an offset of 12 which is useless but honestly it's not that big of a deal and that's it two awesome easy ways to build out a flexbox grid system if you have any questions please don't be shy leave a question down below or just say hello I'm happy either way and if you haven't already subscribed I bring you videos like this every single Wednesday so please consider subscribing so you don't miss any of those that's it for this one guys take it easy