Columns vs Grid in Oxygen (Plus Cheat Codes!)

so one of the questions i get a lot is columns versus grid in oxygen columns has been around for a while grid is relatively new inside of oxygen they have a grid builder but there's also an easier and much simpler way to get grid-based layouts and that is with oxy ninja's core grid classes which i'm going to show you how those work as well but we really have to talk about the old columns element and all of the problems and limitations with it because there are many and really what the columns element is doing is just creating a css flex container to put divs in and then it's auto uh choosing the column width on those divs it's just trying to do a lot of work for you but it actually over corrects and i'll show you how it over corrects and it just becomes very problematic but even if you did the css flex container yourself to make columns you would run into a lot of troublesome issues and i'm going to show you the main issue which is why i don't use the columns element in oxygen hardly ever and i don't use css flexbox to try to create columns either so strictly 100 grid and i don't use the grid builder and oxygen but i will show you how it works and then i'll show you how i actually build grids in oxygen i think i'm rambling yet again this is a common problem so let's just jump into the tutorial so i can show you how it works all right guys we're going to talk about columns versus grid and oxygen and really what we're talking about is flexbox versus grid in general because the columns element in oxygen uses flexbox for its its primary control and um you're gonna see really the big downside of flexbox and why i hardly ever use the columns element and that there's actually more of a downside to the columns element in oxygen i think than just traditional flexbox which i'm going to show you and you're going to see why i barely ever use the columns element in oxygen and then why i don't really use flexbox to create those like columnized if that's a word uh layouts but let's go ahead and dive right in so that you can actually see instead of me just blabbering on and on and on i'm going to add a section and a background color to the section just you can see what we're working with here and i'm going to add some content to the section the main reason i'm going to add the content to the section is because in order to see one of the big downsides of columns and flexbox is you have to see content around uh the columns you'll see what i mean in just a second so this is a heading or let's just say these are these are our features like wow can't type today all right we're going to go with a text element next this is how a basic you know grid kind of style section would look with like feature cards or something all right so we're just going to quickly go to lorem ipsum and grab a little dummy text here and i'm going to pop that in and cool and that looks terrible because it stretches all the way across so i'm going to go ahead and go to advanced size and spacing max with 720 and i i tend to say hey never use pixels all right so why don't we just fix that real quick 72 rim gets me the same exact thing cool and now we're going to start doing our columns and grids and and things like that first i'm going to put some spacing between these elements i'm going to use owl spacing for this if you don't know what owl spacing is i made an entire tutorial on owl spacing i'm gonna make it pop up on the screen here and then hopefully afterwards you'll remember to go click it and watch it because it's really cool basically it evenly spaces out everything in a div or everything in a container evenly like magic all right because you see spaces between these and then anything else that i put in this section is going to be evenly spaced the exact same way so i'm going to go ahead and add our columns element great and you see a little gap there right because we've got our owl spacing and i'm going to choose the 33 the three column layout and there you go and what a lot of people do when they're first using oxygen is they say hey i need columns and they see a columns element and they click it and then they say i need three columns and there it is and everything looks fantastic right wrong like lots of lots of downsides here lots of issues to prove these downsides and issues i'm going to now add a div and we're going to use pure css flexbox i'm going to use the oxygen controls but we're just going to use flexbox from the ground up so i'm going to put 100 width on this and then i'm going to put another div and this is going to be for our grid so i'm going to go ahead and put 100 on this cool all right so there we have our columns and why don't we why don't we actually name things because you know that's that's always a good practice uh so you can see exactly what we're working with here so i'm going to hit command a and this is going to be called columns it's kind of already called that this is going to be called rename flex wow uh okay everything's super laggy by the way when i'm screen recording i think i need a new computer flex box not flex body flex box columns and then this is going to be grid columns awesome so we can kind of go for the same exact look with all three of these things and just see what the downsides are we're going to start up here in the columns and i'm going to add another div we're going to add a card inside of here remember these are feature cards these are our features right so i'm going to add a card i already have a utility class for this i'll just use c card lite and i'm going to add an icon and i'm going to add a heading and i'm going to change that heading quickly to h3 and then i'm going to add text and then i'm going to add a button great and then i'm just going to use owl spacing on this i'm not going to do this the way i normally would in real life because that's not the point of the tutorial but now i have a card right and this is a feature and we have lorem ipsum still loaded locked and loaded in our clipboard i'll make it a little smaller and then this will be click here so this actually looks like a real life uh basic icon card yes we all agree cool i'm going to go ahead and name it card because we want to stick with our naming stuff so we can see what everything is over here all right so in order to get this to the rest of the layout i'm going to go ahead and select this inner column here and i'm going to paste and i'm going to select the outer and i'm going to hit paste and now we have our three columns okay before we talk you already see one of the problems here you're like kevin that looks terrible in fact i'll go save this we will preview it on the front end and there's our our cards we have no gap they're all touching each other because there is no gap now i do want to be fair this would not behave like this for you in a default oxygen install if you've watched my tutorial on how to set up oxygen properly if you haven't done that go watch it i'm going to put a link to it it's going to pop up here any minute go watch it after this video but we're going to go to manage settings global style oh i'm already there cool so under global styles if you go to sections and columns i clear out my columns padding because the reason is the default is like 20 pixels all around right i think that's the default don't hold me to it but i think that's the default and the problem is you know we see a gap now so let's go let's go reload this on the front end you see a gap but now we have a gap on the left and a gap on the right which misaligns all of our content this is not good at all and this is the main way that you would create a gap between columns when you're using css flexbox and the reason is if we go to dot canius.com not canva.com also a good resource can i use dot com and type in gaap we're gonna see that our gaap property for flexbox is not really well supported okay lots of uh browsers that are are lagging behind in in uh supporting the gap feature for flexbox and i think that's why it's not in there by default in oxygen because if you look at the uh structure panel if i click on my columns wrapper you have like these settings where i can stack columns vertically and i can reverse the column order and i can set column widths to 50 like i can do a lot of cool stuff but i can't create a gap and that's like the main thing i need to be able to do with columns is create gaps because you see when you add padding it's not sufficient because it screws up the padding it screws up the alignment of all the items in the section that you're working on now there are other hacks that you can do where you can apply margin only to the right of columns and on and on and on and you can do stuff with a pseudo class like it's just it's hacky it's very very hacky all right and there's no reason we don't have to because we have grid uh but let me show you some other downsides of this um here here's one so oh sorry i didn't even finish my thought right we went to that default area uh in global styles i'm going to show you exactly why i clear these out because with the one percent of the time that i do use these columns i don't want default padding on them because if i want to change the padding and let's say use a padding class right a utility class say i want large padding look nothing happened because this default padding in oxygen basically applies these at the at the id level right so when i add a class to change the padding it ignores it and so i have no control over that so what i would have to do is go into every single div and adjust padding manually here and that's just not scalable totally impractical total you know a killer of this of using this thing so what i say to do when you're setting up oxygen sorry is to go to sections and columns and just clear this out because at least now when i do use the columns if for some reason i want to add padding in there i can go choose my parent div so that's this one right here and i can add a padding class to it let's say large oh no that's overkill let's do medium or even small like you know gaps don't wow can i type gauss don't have to be huge let's just add a small gap right and then let's say these other columns didn't exist and and now you're you're also going to see one of the problems that i have uh with with the columns layout first of all you can see there's two cards now and there's clearly not two columns in here there's one column and a card inside the column i can't even select this i don't know it's it's somewhat of a bug like if elijah's watching this you know investigate this because when i was playing around with this earlier this kept happening so i'm going to duplicate that div and now i've completely lost because what what the columns uh element in oxygen does is it dynamically changes the width of the divs that are inside it remember these were set to 33.33 you didn't see me change this to 50 it changed itself to 50. right if i put this back at 33 and i put this one back at that one okay sorry i'm making a mistake here of applying that to a class we definitely don't want to do that be careful with your classes all right so it's actually sorry at 100 so it's got me all confused because it doesn't behave like it's supposed to behave like my it's not my brain's not making sense of it so i'm going to go back to this id and i'm going to change this 33.33 and then i'm going to choose this one and we're going to go back to the id and change look at that that one went to 166 what is going on here 33.33 and now we have our three columns back but then we have that odd fourth thing which isn't even in our freaking structure panel because it glitched out on us right to me this is like this is insanity okay so i'm just gonna leave that there because it's a good demonstration of why you shouldn't use this columns element inside of oxygen in my opinion okay all right sorry that's i know that's a bug i shouldn't make fun of bugs i think it's a bug i mean it looks like a bug to me uh in fact i can't keep that there let me let me just let's hide that for a second that's a that's a travesty all right so here we are we have our flexbox columns and our grid columns i didn't even get to show you because this columns element broke i was also going to show you that it doesn't uh it doesn't respect flexbox wrap the way that it's supposed to as well i should be able to add three more divs in that flexbox wrapper in that container and it should break to a second column or a second row and have those three columns be on the second row and it should look somewhat like a grid but it it doesn't respect wrap either uh so this does so flexbox columns let me show you what the columns element in oxygen is attempting to do and it's like columns for dummies which is why you can't really customize it much and why it breaks when you try to play around with it so i'm going to take this div and i'm going to set the layout to horizontal on flex what that does let me actually let me undo that because what you really should be doing going to advanced layout and let me clear it out so we don't have any issues in there okay so layout set the display to flex set the flex direction to row and then you can set the align items to excuse me stretch and then what i'm going to do is add a div so this is exactly what the columns element was doing for you in oxygen but it doesn't do it the way that it's supposed to do it so if i have this div and i set the percent to 33.33 which is that's what the others were right and i duplicate it twice you're going to see i have exactly what oxygen was trying to set up for me initially but you're also going to see that it doesn't number one it doesn't break the way that you just saw that columns element break so it does work properly and it respects let me go back to the wrapper it respects wrap so if i go to layout and i choose this flex wrap wrap then what i'm going to do is i'm going to duplicate and i'm going to duplicate and i'm going to duplicate and i can have two rows and i can have what appears to be a grid now this still doesn't solve my problem let me un-hide this real quick because i want to steal my card and then i'm going to hide it again so we cannot see that travesty up there and i'm going to paste my card in and i'm going to paste my card in and i'm going to paste my card in all right and we're going to see what our layout looks like here and i want you to see that this gap problem is two-fold not only do i not have gaps horizontally on the x-axis i don't have y-axis gaps i don't have gaps top to bottom between these elements and if you did it with padding again you would still have a lot of alignment issues then you would have extra spacing above and below this whole container that's not good so you're going to see why we just use grid and my general rule of thumb is that flexbox is amazing for aligning content and grid is amazing for laying out content so if you want to think about it like that think about it flexbox i'll say it again flexbox is good at aligning content and items grid is great at laying out content and items okay so this is a layout right a three column two row layout that's for grid right then i can do things inside of that using flexbox and that's a cool thing is flexbox and grid can actually work together and so you don't really choose one or the other you use the grid to control the basic the main layout and then you can use flexbox to do a lot of other cool things and then there's some things some advanced things you can do with grid um as well like you can control individual columns and rows with grid you can span them so if i wanted this to take up two columns i could have it take up two columns i'm not getting into like the this is not a complete tutorial on css grid or css flexbox this is just comparing the columns element to grid which is flexbox to grid but you see here i got somewhat of a grid but i still have the gap uh issue so what i'm gonna do is come down here and in fact what i'm gonna do is add one more div because we're gonna do this another way after we do it the manual way and i'm just going to leave that div sitting right there just so you can see i'm going to show you how to make your life crazy easy and crazy fast with some utility classes we're going to use grid utility classes but let's just focus on this div right here this is where i'm going to create my grid manually using oxygen's grid controls so remember column count what do we want we want three columns and we want a gap of let's change this to rim and i want a gap of 16 pixels so that's 1.6 rim if you've reset your like just go watch my tutorial on setting up oxygen properly all right so i'm going to go ahead and add a div and i'm gonna add uh i'm gonna duplicate it so i have two more right and actually let me go back what's actually cool about this i don't need and we'll talk about one of the other downsides of this in order to create spacing around these things you generally you put the div card the card wrapper div inside of the column div and so now you've doubled your dom elements right so you have a div inside a div well when you use grid you actually don't need a containing element right i can just have because i don't have to use padding or anything to create my gap so what i can do is i can just paste a card in there i think i have my card yeah so there it is let me go ahead and uh let's let's put more owl spacing on here let's do owl spacing double dash l it's like for large spacing so we can get more space between these things okay so there's my card it doesn't need its own wrapper it's just there as my card because when i duplicate it it's gonna naturally have a gap between the items right so and then if here's the cool thing about grid right if i just keep duplicating i don't have to even set a wrap it just knows like keep going like just keep making the grid right that's really really cool really really helpful so now you see i have perfect alignment let me turn off the these flexbox columns we have perfect alignment with our other content in the section there's no extra padding on the left no extra padding on the right no extra padding on the top or the bottom it's behaving exactly as you would expect a layout like this to behave and all i did was a couple clicks of the mouse i hit grid i hit three columns i hit 1.6 and that's actually should be rem now you can also control the gap here because we want those gaps to be even right so it's 1.6 left and right we want to be 1.6 top and bottom as well and then here down here is where you can start getting into like how you want individual children of this grid to behave all right but we're not going to mess with that for right now i just want to show you the main thing the main problem with the columns element number one is that it breaks if you start playing around with it too much it auto changes the width of the divs that are inside it it just goes it's crazy making if you make a flexbox columns wrapper on your own it doesn't break and it does respect the flexbox wrap property but you still have the problem of not having a gap and you know like i said if you add the gap manually you have the browser support issue so grid fixes that's like the main thing that grid fixes and it's really really easy now uh the problem with grid one problem with grid like flexbox naturally especially if you use the columns thing is more responsive like grid it's gonna have these three columns it sets the the min width of each item in here of each child element you can set that to whatever you want but what you're going to see is that when i go down all it does is squish them so now it does uh so now it's going off the screen i don't know if you guys can see that yep so now i can't even fit all three things in here um so that's obviously a problem and this is one reason why people are like i don't i don't really know how to use the grid thing it's like it's breaking so all you have to do really is come in here to let's say this all right that looks good so we'll go the next break point down and we'll say all right on this break point i'm gonna have the grid turned on and i'm just gonna go to column count two at this break point and that solves your problem right and then what i'm going to do is go down here to 768 and i'm going to say ah those look really squished i'm going to go ahead grid and i'm going to go column count 1. all right this is one way of doing this there's other ways of doing this this is probably the simplest way or at least the more straightforward way is going to the break points and figuring out what you want the break points to be so here's where i'm going to make your life super super super easy okay remember that little little div sitting there that we that we had okay oh wait hold on before we unhide that or before we hide that let me steal one of my cards okay because i don't wanna have to rebuild that again all right and we're gonna hide this wow it's getting super laggy anytime i'm screen sharing super laggy all right so i'm going to click this div right here and i'm going to come up here and i have oxy ninja installed and what oxy the the most powerful part of oxy ninja see when beginners are looking at oxy ninja they're going to be looking at the layout packs like ooh look at all these layouts i can install i'm just going to be honest with you almost never use the oxy ninja layout packs the only reason i install oxy ninja is for the core class system all of the utility classes that it comes with and some of the most powerful utility classes in oxy ninja i'm gonna have a link below to oxy ninja in the description it is an affiliate link so if you want to support this channel i don't ask you for donations or anything like that it's just if i show you something cool and it's a third-party tool and it costs money and you have to buy it you can use my affiliate link if you want to you know help me out if you don't want to help me out if you hate me if you don't like my tutorials if you just want to steal my content whatever that's all fine and good too don't use the affiliate link just go to oxyninja.com i think that's their site but if you do want to support the channel you can click the affiliate link in the description so watch watch me just make this grid right so how many columns do i want three so i'm gonna type in the word columns and i'm gonna do dash three and i'm just gonna choose the three columns okay and then i'm gonna add a div actually sorry i'm not gonna add a div because we don't we don't even need um wrappers in here i'm just gonna paste my card and then i'm going to duplicate my card boom now i'm going to choose my parent wrapper and i'm going to say you know what i'd like a gap between those things i'd probably like a medium gap so i'm going to do gap dash m and i'm going to see i see i had a lot of options there but because i put m it's going to take me right to m so there's my gap if you want a bigger gap let's take away the gap m and let's do gap l and now i'm going to have a larger gap there it is now i think that gap is a little too large and you can adjust these by the way you can make them whatever you want but i'm going to go back to gap m and let's say i wanted remember we wanted six cards initially so i'm just going to duplicate this three more times and so i have my cards with my gaps now let's control the mobile spacing so what i'm going to say is i'm going to come down here and look at and just to give you a reference here in oxy ninja's utility classes this break point is considered xl this is considered l m and s so let's look at how it looks on excel looks fine so here's where it starts to look squished so that's l so i'm gonna come to the overall i'm just gonna guess here right just for now so i'm gonna type in l two which means at the large break point i want two columns okay so i'm gonna choose that and then i'm gonna say m dash one at the medium break point i want one column fam i'm done i'm i have a responsive grid guaranteed right i don't even have to look at it right off the bat i just i've done this so many times i already know it's all good to go so if i look at the xl we still have our three if i look at the l we have two and if i look at the m we have one and then at the s it just adapts to the m it keeps the m sizing right so i have a fully responsive grid with controllable gaps no extra spacing left or right no extra spacing top or bottom didn't have to touch a single control inside of the oxygen panel didn't have to know anything about really how grid works i just slapped on some utility classes i said hey i want three columns on large devices i want two columns on medium devices i want one column and i want a gap between them that looks like this now you can do other stuff with the utility classes i'll do an entire oxy ninja grid utility class tutorial at some point that shows you how to make fancier grids and stuff like this but this is like this is what i do every single time when i'm creating layouts like this where i need columns and rows is i use oxy ninja grid classes and it's done in seconds and i don't have to finagle with oxygen oxygen's columns thing i don't have to put up with all the downsides of trying to do this with flexbox i just use grid and i move on with my life it's that easy now if you are doing something like an image-based grid where all you're going to have is images or image cards then you may want to use flexbox because you can create more crazy kind of layouts where uh you've got uh certain rows are taller than others and on and on and on uh you can you can do that with uh with flexbox better i still wouldn't use the columns element i would i would just use a normal div with flexbox and go from there if you're comfortable making those kinds of layouts but if you just want simple two column three column four column five column two thirds column right like if i grab this wrapper right here and i take off that columns three and i just say we're gonna go columns two three uh can i type columns two okay i hate this lag i need a new computer columns two three okay you can see that i have a the so the first part of it is small that's the two part and then the three part makes it longer so it's two columns with one short column and one wider column right and then you can make these uh go equal height by using stretch which is not a problem so if i just and there's actually a class for that so c stretch so now we have equal heights right and i have a different kind of layout now that's not the layout i wanted initially but uh like i said you can just create other types of grid layouts very easily with oxy ninja's classes but that should be a good breakdown for you on columns versus grid flexbox versus grid and then the fastest easiest way to make grid layouts inside of oxygen is with oxyninja's utility classes the core class system so if you have any questions on this stuff drop a comment below make sure you like subscribe all of that good stuff if you like this channel obviously there's more oxygen tutorials to come also more agency tutorials to come so if you're a freelancer if you're an agency owner doing web design seo digital marketing i've got a ton of great valuable content on the way but for now that's it peace

Channel: Digital Ambition

Views: 7,041

Keywords: oxygen builder, oxygen tutorial, columns vs grid oxygen, flexbox vs grid, oxyninja, oxyninja core, utility classes

Id: kSuLN0e4BF8

Length: 28min 14sec (1694 seconds)

Published: Sun May 09 2021