0:00:00
So let me start out by saying that if you are not using CSS grid to build the majority of your layouts inside of oxygen, then you are really missing out. I already did a tutorial that compares grid to like the columns element in oxygen or just using a flexbox controls inside of oxygen grid is far superior and it offers far more upside. And it doesn’t come with a lot of the negatives that the columns module and flexbox come with. The problem is the challenges that a lot of people struggle to understand grid in the very beginning. It’s just like anything really it has a little bit of a learning curve. But once you understand it, you really unlock its power. And especially this is especially true when you use a framework, a utility class framework like oxygen. And I just want to say off the bat, yes, I am an affiliate for oxygen, and however, I am doing this tutorial and I use oxygen, because literally I install it on every single website, every website that I build comes with oxygen, and installed automatically. It’s part of the blueprint that I that I use. So I would not be doing this tutorial and in pumping up oxygen, if I didn’t use it on every single project, and you’re going to see exactly why I use it on every single project. You don’t have to know anything about CSS grid. You don’t have to write a single line of code. You don’t have to use the grid builder inside of oxygen at all. We’re going to be able to build simple basic grids all the way to fairly complex grids just by using oxygen and utility classes. I’m going to walk you through the entire thing in this tutorial. You’re going to understand grid better by the end of this tutorial. And then you’re going to see the magic and the speed at which you can use and implement CSS grid simply by adding a few utility classes. All right. So let’s go ahead and take a look at oxygen and the grid utility classes and all that it empowers you to do. Welcome back to another tutorial. Everybody. This one is going to be a complete game changer for you. If you’re not using a utility class system like oxygen. You’re going to see exactly why you need to be using a system like this. Let’s take a look at what we’re going to be able to accomplish here. So I’m going to walk you through building simple even grid columns. So two column, three column, four column, five column, et cetera. We’re going to talk about controlling the grid column size automatically. So there’s some oxygen and your presets that allow you to create like one third, two thirds, that kind of thing like offset grids. And then we’re going to talk about the manual column size control that you’re going to have over your grids, the manual row size control. You’re going to have over your grids. We’re going to talk about grid cell position. We’re going to talk about a really significant use case here like practical use case that you’ll probably run into all the time, which is alternating content. We’re on mobile. We actually want to change the stacking order so that we have instead of content image, image content. So that’s nice and clean. It’s going to be super easy. We’re going to talk about grids inside of grids. And then I’m going to talk about gap control mobile responsiveness. There’s a lot of really cool stuff that we’re going to cover. And this might seem like a lot, but look at the time on this tutorial. It’s not a lot of time. We’re going to fly through this. And that’s going to prove to you the value of a system like this. And I’m going to, here’s the promise I’m going to make. You’re not going to touch a single line of code doing any of this. And you’re never not once are you ever going to touch the grid builder inside of oxygen. All right. That excites you. It should excite you. So let’s get started. We’re going to add a div into this first section here. And we’ll just take a second to talk about general grid structure. So here is the wrapper. All right. So this is the we’ll call this grid wrapper. All grids need a wrapper that control the grid structure. And then you’ll have the items inside of the grid. So in order to do this in oxygen, they make the naming convention is very, very simple. So for example, if I want two columns, I’ll write the word columns and then I’ll do dash two. And it’s going to find the utility class for me. And I’m just going to pop that on to the wrapper. I now have a two column grid structure. And I’ll prove that to you by putting an image in here. And I’m going to set that image to a width of 100%. And you’re going to notice that it does not span the entire wrapper because it is conforming itself to the grid structure. And if I duplicate that image, you’re going to see exactly what’s happening. We have two images side by side. Now I’m going to select the entire wrapper.
0:04:38
And one of the things that grid is really, really good at is gap control. So we’re going to put a gap just by typing the word gap and then putting a dash and then choosing the size of the gap we want. So I’m going to choose a medium size gap. And you’re going to see that I now have a gap between these two items. I don’t have any extra room on top or on bottom or left or right. So it’s a perfect grid. And the good thing about grid also is that as I continue duplicating these items, it’s just going to keep following the exact same grid structure. And it’s even going to put the gap automatically between the rows. So I have a perfectly symmetrical grid. Now I’m going to delete these items because very rarely do you just throw items into a grid. Typically you’ll throw containers into a grid. And those containers will contain other multiple items, like if you’re making cards or something like that. So I’m going to hit add and I’m going to hit add a div. And I’m just going to put a class on this div that’s going to create like a pseudo card, like a placeholder. All right. So that’s not really relevant to the actual tutorial. It’s just going to give us a visual placeholder for what might be a card. And then I’m going to duplicate that div. And now we have two cards side by side. So there is a basic to column grid. Now we haven’t done mobile responsiveness yet. I don’t want to throw too much stuff at you at once. So what we’re going to do is build all these grids and then we’re going to come back at the end and talk about mobile responsiveness because mobile responsiveness is very easy. But I just don’t want to throw too much at you at once. So I’m going to select our wrapper here. And I’m going to duplicate it because I want to show you what happens if I want to change this from a two column grid to a three column grid. So now I’m going to type in columns dash three. And I’m going to select that utility class. And I’m going to duplicate my card. And you see that I now have three columns instead of two. If I duplicate this wrapper and take away the columns three and add columns for you’ll see that I end up with four columns. And I can duplicate my card and all as well in the world. I’m going to choose the wrapper and I’m going to duplicate that. And we’re just I mean this is like, you know, it’s so fast and easy that I can actually just go through the monotony of adding all of these even though it’s so obvious. Right. So I’m going to choose the wrapper. I’m going to duplicate and I’m going to do the final one. This will be the last one.
0:07:04
So we’re going to do in this section anyway. Not the last one altogether. All right. So I’m going to grab that card and I am going to duplicate. So just like that in seconds, I have a two column grid of three column, a four column, a five column, and a six column grid. You see how quickly that that happened. You see how easy that was. That is simple even grid columns with oxygen, and utility classes. And they all have their perfect gaps all as well in the world. Let’s let’s move on. So let’s talk about different like offset kinds of grids. All right. So what I’m going to do is I’m going to grab the wrapper right the grid wrapper controls our grid structure. And I’m going to type in columns dash one dash. And you’re going to see that I have two options. I have a one dash two and a one dash three. These are changing for me the fractional units of the columns. And I’m not going to get too technical with this stuff. But you can see that one two is going to be a smaller first column and a larger second column. So that when I duplicate this card, it’s automatically going to fill the rest of the space. And then if I put my gap on here, you’ll see we’ll just continue using the medium size gap all the way down. You’ll see now that I have offset columns. So these are obviously not even columns. I have a small column and a large column. Now I’m going to duplicate this. And I’m going to remove our one two and I’m going to put on our other one. So this is columns one dash. And then my other option is three. And so now you see I have a slightly different grid, a much smaller first column and a much larger second column. Now I’m going to duplicate this. And we’re going to roll through our other options. So I have a columns two dash one. And then I’m just going to go ahead and duplicate that. And I’m going to take off the two one. And I’m going to put on the next one. And I can you can even just do shorthand like this a lot of times like two dash and it’ll just find it because it matches. So there’s two three. And then I will duplicate. We definitely don’t want to make it a link wrapper. All right, I’m going to take off the two three. And I’m going to do three dash. And that’s going to give me my three one. And then I’ll duplicate that and take off the three one. And we’ll do three dash. And I’ll have my three two. So in seconds, what have I done? I’ve created a bunch of different offset columns. Now the thing about the auto columns is they will continue following the same format. So this is the one dash two, I believe. So if I duplicate the not the entire thing, but the card inside it. The next card will be small, the next card will be large, the next card will be small, the next card will be large. All right. So if you want that format to to continue repeating all of the way down, then you can use these autos.
0:09:52
If you don’t want that to continue repeating, if you want to make a manual kind of complex grid where you control the span of each item or each cell inside of the grid, we can absolutely do that. Now that’s what we’re going to talk about next. So we’re going to come down to grid column size control manual. So I’m going to choose the wrapper here. And I’m going to make this a four column grid. All right. Columns dash four. Choose that. And you’re going to see here that I have my four columns. And you already know what we need to do next before we do anything else. We need to see what our gap is. Okay. Set our gap. And now let’s let’s say let’s let’s keep making two rows here. All right. So I’m just going to keep duplicating these cards. Let’s say I wanted this card to actually span two columns. So it’s a wide card. And then these final two cards also span the two columns. So I only need one of these cards to do this. I’m going to remove one of them. I’m just showing you how the grid works. And then down here will only need one. So I’m going to not duplicate. Excuse me. Oh, deleted the whole thing. Sorry, getting a little out of hands here. Hold on. All right. And click out and click in. Okay. Let’s delete that one. And let’s click this one and delete this one. Okay. Perfect. So now I remember all I’m doing here is trying to control the span of one of these elements here. So I’m going to click this card. And I’m going to type in span really call span because there’s a row span and a call span. So I’m going to call span. And then you get to choose like do I want to span to do I want to spend three do I want to span four. I just want to span two because that’s what we talked about doing. And then I’m going to come down to this end card right here. Remember we wanted that one to span two as well. So I’m going to call span two. And voila. We are done. So now I have a much more complex grid simply by adding a few classes like really one class to two different items or two different cells inside of my grid created a four column grid. Put a gap on it. And then on the first item. I spanned it to columns. And this and the very last item. I spent it to columns as well. Very, very simple. Let’s go ahead because that’s so easy. Let’s go ahead and create another one that’s like that. So let me go way up here and just steal one of my four column grids again. So I’m going to copy that. I’m going to come down here. And we’re going to click in here. Sorry when I screen record it’s a little laggy. And that’s throwing me off here. But we’re going to we’re going to be OK. So what I like is one big center block. Actually let’s not do this yet because we’re going to let’s just do this in the next section. So we’ll talk about row size control because now we’re going to combine column size control with row size control to create it a different layout. So I’m going to choose the wrapper again. And we’re going to set this to four columns. Man, I really wish I could type better. I’ll practice. All right. So we’re going to duplicate duplicate duplicate. And just as you saw before we’re missing a gap. So it’s very easy to just throw on a gap property columns gap in perfect. And then I want basically one large block here that spans two columns and two rows two columns and two rows. So I’m just going to start out by selecting the second item. And we’re going to say call span. The lag is killing me call span to perfect. And then I just do the same with row. So row span to.
0:13:31
Now you’re going to see it doesn’t do anything. And the reason is is because it’s not stretching to fill the available space. And the way that we do that is within one more utility class. And this is an oxygen utility class simply called stretch. And we put that stretch on. And now it’s going to that item is going to fill to take the available space. And if I duplicate that very last card. Remember this is actually the last one in the position. It’s going to fill on the opposite side. So now what I’ve done is I’ve created a much more this is like, you know, a classic layout really. But look how we created it in just seconds. And we have our gaps. It’s all perfectly symmetrical. It’s going to continue. You know, the if I put more content inside of this. It’s going to continue stretching to fill the available space. It’s not going to break really, really powerful stuff. And that was with a column span and a row span manual control simply with utility classes. No code, no grid builder, no nothing. You see how fast that happened. Next is cell position control. So we have this box called move me. And we’re going to talk about how we can move this not by dragging it around. But moving it with utility classes. And you might want to do this. I’m, you know, there’s a lot of reasons you might want to do this. I’m going to show you a practical reason here. But before we get down to the practical reason. Let’s just go ahead and test this out. So what I’m going to do is use the C row start and C column start classes to determine what column and what row this item needs to be in. Again, I am applying these to the individual item that I want to move. So the first thing I want to do is move it to the first row. So I’m going to type in row start. And then I’m going to choose row number one. And you’re going to see it jumps to the first row. Now that’s not where I wanted. I actually wanted in this right corner over here. So now I’m going to move it to the third column. So if it’s in the first row and if it’s in the third column, it’s going to be in the spot I wanted to be in. So now I choose call starts. And I’m going to type in three and choose call start three. And you see it is moved exactly to the position that I wanted to move on. Now what’s important about this is this is me moving it on the desktop. What if I only wanted to move it on a on a on a mobile break point. So oxygen has these break points by default. And in oxygen, we map these to sizes. So this one right here is mapped to what is called the XL size the extra large. This is the large or L. This is the medium or M. And this is the small or S. So you see these classes call start one call row start three whatever I said it backwards. But if I do row start L, you’re going to see I have another whole set here. This is for the large device size. So if I want this to be in row one only on large devices and below, then I would put this class on here.
0:16:36
You’re not going to see it move now because we’re not on the large device size. If I wanted to do column start L or M right I can change where it is on the medium devices. I can change where it is on small devices. This is how you control that. So you have full control over a cell position and individual cell position at all break points. I really want you to just understand how extremely powerful that is and how simple it is just by using these utility classes. Now let’s take a look at a real practical example here. So if I let me make sure okay there’s already a class on here. So I don’t want to do that. All right so I’ve got let’s take a look at our parent wrapper. We’ve got two columns medium gap. We’re set to stretch and then columns L one. Let me take that off so I can walk you through it. So what we want to do is have these columns break to one column on large devices and by doing that here let me show you how so I’ll type in L dash one. And I’m just choosing columns L one so on large devices there will be one column. That’s just how you read the class right it should be very straightforward. So I put that on and when I go view the large device size you will see that it’s stacked except we have a problem we have the content and then the image and then the next one is image and then content it would be really nice if we could put this image above this content right this is a classic problem that we need to solve in web design. So very simple so I click on the element I want to move we just showed you how to move elements right. I only want to move it at the large or I want to start moving it at the large break point every other break point below it’s going to be fine by default. So at the large break point I want to change its position now here’s where it’s a little tricky because right now there’s one row and two columns. So here’s column one column to they’re both in a row. I don’t want to change its column position I don’t want to swap these when it stacks on a large device there will effectively only be one column and will be left with just row control. So I actually want to put the row start one class on here because on all devices I’m going to do row start L because I’m working on large devices and I’m going to choose one so that on large devices when this stacks the image moves to the first row. Alright so I’m going to click that and if we go preview you see that’s exactly what we end up with so we have an image content image content. Now that’s a second it took longer because I had to talk you through it but if I was just building this it would have been mere seconds and I would have had exactly what I wanted to have that’s the power that this infrastructure gives you that this framework gives you. Let’s move on to grids inside of grids so we’re going to take a look at another very common use case here. So I’m holding on to my or I’m selecting my wrapper and I’m going to make this columns and we’re going to do two three I yeah let’s do two three.
0:19:49
Alright because we’re going to pretend now that this is an image and then we’re going to put content over here and I need this side to be a little bit bigger to fit another grid inside of it. So now what I’m going to do is I’m going to add a div and that’s going to be the container for our content over there now two things number one you see there’s no gap so we’re going to need to add a gap. And I’m just going to stick with the gap in for now but you also see that this is not filling the entire space it’s not stretching all the way down alright so we already know how to fix that we talked about that we add our whoops. We add our stretch class and you’re going to see right there that it snaps to fill the entire space and so now what I can do is actually use another utility class for moxie ninja and this one is for padding so I’m just going to type in padding man this lag is killing me absolutely killing me padding XL and that’s going to put XL padding inside of this so that when I add like a heading you see that we are nice and evenly spaced out there. Alright so the next thing I’m going to do is I’m going to add just some text this is what a classic like maybe feature block section would look like so big image over here a feature headline and then feature text and then we’re going to put a sub grid below it or just a grid inside of a grid really. So in order to do a grid inside of a grid I just choose this container I’m going to add a div and I’m going to make it a two column grid so I’m going to type in columns dash two and I’m going to put I’m just going to steal this and we’ll just pretend this is another card and I’m going to pop that in and I’m going to duplicate it and then I’m just going to put a gap on this grid the same way that I do on all my other grids and then we can just space these things out with a little owl spacing this is not a oxy ninja utility class but it’s a utility class I’ve done a tutorial on before. So there you go we have a grid inside of a grid in seconds alright so this is you know a classic layout that you would use in web design and I’m guessing if you try to build this with the grid builder or manually with flexbox. Or whatever it would take you a while much longer than it just took me to do it that’s for that’s for sure so you see the power of a system like this. Alright now the question is what about gap control what about mobile response of this all right let’s go back to the top. So we have our two columns and let’s just take a look at what happens like on devices. So this is the large device size you see this one is off the map over here so that’s no good if there was content inside of these cells it would be mad squished so obviously this is needs some love needs some love. So the cool thing about this is I can actually preview at the device sizes and then add my classes if I don’t already know them now over time you’re going to learn this system so well that as you’re building a grid on desktop mode you can pop on the exact mobile utility class. That’s the most important thing is that you need to make it perfectly mobile responsive without checking break points that’s pretty much where I’m at but if you’re unsure you can always just go to a break point and see how the grid is behaving and then decide what you want to do and add a mobile utility class there.
0:23:09
And the thing about classes the reason you can do this is because the class is not applied at a break point a class is just applied to an element so wherever you it doesn’t matter what preview you’re in here. You add a class is just adding a class it’s not adding it at that break point so you can go to any break point you want see what needs to change and add the appropriate classes so for example I’m good with this to column grid here at the large device size but on medium I’m not OK with that on medium I wanted to be one column so I would type in M1 and that’s going to give me my utility class for columns M1 which stands for on mobile devices make one column alright. So there you go we now have one column on mobile devices I go back up to the large device size I still have two columns and I still have two columns on desktop so you can see how easy that is to change the grid based on the break points so this three column. On large devices I actually want that to break to one column because those are going to be too squished and I don’t really want to columns so I’m just going to do on large I want to I’m sorry on large I want one so see columns L1 now I have one on large let’s deal with this for column grid here so on large devices I would actually like to these side by side so I’m going to do that so we’ll do L dash to that’s going to give me to at the large device size and then on medium I wanted to break to one. So I’m not going to go to the medium break point I’m just going to add M dash one here you’re not going to see it change because we’re not previewing the medium break point but when we do check the medium break point you see that we have one column alright let’s deal with this much larger one here so this was one two three four five so five go to the large here that’s definitely not good in fact we might have to deal with the Excel here so on Excel I want three so I’m going to type in Excel three and I’m going to put this in here. I’m going to pop that on and I have three at the Excel I want to with the large so I’m going to do L2 and then I want one at the medium so I’m going to do M1 and you see this is how this system works you just layer the classes on top of each other and it all works out so I come down to preview large we have two I preview medium we have one and then that’s all good we don’t need anything else now this last one let’s take a look at our Excel what we can do here so let’s do three at the Excel and then we’re going to be able to do let’s check large okay let’s do two at the large so that’s L dash two let’s do we can keep let’s keep two here and say at the S is when we wanted to break to one so S one so C columns S one now we have one at the S size so now you see perfect mobile responsiveness through every single break point touching no code touching no grid builders just by using utility classes now here’s what special right yes I can change the column the column number on break points I can change these spans as well remember we span this to columns what happens if I decide like well on a different device size like maybe on let’s see this device size where are we here so on this device size I actually want this to just behave like all of the others so let’s check my structure panel I’ve got the correct one done so what I’m going to say is so we’re at which break point we at so this is large so at L I’m going to do a span that’s call span L and I want to choose one and you see that it conforms back to one F are now one fractional unit just like all of the others and if I want to do that to this one I can say all right same thing call span L because I’m working on the L break point and I choose one because I just want it to be one there or you can say I want that one to be three at the large size right now I don’t know if I’d ever do this kind of stuff but I just want to show you that you have full control over these items at all break points whether it’s the number of columns whether it is the you know how many columns they span how many rows they span all of that is adjustable at every single break point we already talked about moving items at certain break points let’s talk about gap control right because we’ve only been using medium gap so far but if you ever come around and you’re like you know what I want a smaller gap for that one so this grid gets a gap of S now it’s a small gap I don’t like that maybe I want a huge gap right so I’ll say gap Excel now I can get a very big gap between the columns and if I continue to build this grid out you’re going to see that the row gap responds in kind so it makes everything perfectly symmetrical again I cannot reiterate the power this gives you the speed of development the consistency of the look and feel of the space that you create that every single time you’re using grids for layouts the spacing is going to be consistent and that’s regardless of who’s actually working on the site if you have a team and they’re all trained in using this this these utility classes they can’t mess it up right they’re you’re never going to have a look off or that break or what have you like this is going to be great for agencies great for freelancers especially but even if you’re just working on your own website having a powerful system like this where you don’t have to mess with the oxygen grid builder and I will you know let’s put it out there the oxygen grid builder is fantastic but my question is kind of like why would you use something like that if you have cheat codes like this just get the cheat codes install the codes and use the cheat codes so you’ve seen we’ve very quickly made a bunch of different grids some very advanced grids they’re all mobile responsive we’ve taken care of traditional issues that happen across web design I don’t know what else I can do to kind of convince you that this is a extremely valuable system now let’s talk about the clicking the link buying oxygen yes I am an affiliate for oxygen and I’m not making this tutorial for oxygen and you commissions it’s a nice like bonus I’m making this tutorial because I want to show you this stuff so that you can implement it in your game and make your life so much faster and so much easier time is money frustration is stress you want to get as much time like clear in your schedule as possible you want to get as much stress off of your plate as possible you don’t want to have to mess around with this kind of stuff you want to just be able to quickly build out complex layouts in in oxygen without any headaches without any messing around have it be super consistent excuse me super consistent every single time and and then just move on with your life right so I would highly encourage you if you’re not using a system like this click the link and a lot of you by the way have asked like Kevin how can we how can we like donate to you how can we help support your channel don’t donate money to me like don’t just give me money for the sake of giving me money I love doing these tutorials I love teaching if you want to support the channel if there’s a tool like this and you decide hey this is really powerful I should have this for myself just buy it through my affiliate link if you don’t want to support the channel don’t buy it through the affiliate link it’s very very simple again I’m going to make these videos regardless I want to create content for free that’s better than the stuff other people charge money for that’s my main goal now along the way I’m going to recommend a tool here and there and if you decide you want the tool buy it through my affiliate link and we all win you win because you get a great tool I win because I get a commission we all win because I keep producing great content like that’s just how this is going to work alright so that’s it for this tutorial if you have any questions drop a comment below I respond to every single comment hit like hit subscribe make sure you hit the notification bell after you subscribe I love you guys so thankful for all of the support we just passed 2000 subscribers which you know that’s in less than a month we went from I went from like 500 600 subscribers to over 2000 channels growing fast it’s really really fun I love interacting with all of you guys I’ll be back very soon with another tutorial until next time peace
