Columns vs Grid in Oxygen (Plus Cheat Codes!)
Vložit
- čas přidán 28. 07. 2024
- If you're interested in OxyNinja, get it here: go.digitalambition.co/oxyninja/
Dear Oxy team ... I'm sorry I had fun with the columns bug. I still love you.
0:00 Intro
02:05 Columns
12:45 Flexbox Columns
17:05 Grid (Vanilla Oxygen)
21:45 Grid (OxyNinja Utility Classes)
---
When you first start out with Oxygen, you might be enticed by the Columns module. Drag it in, choose your columns layout, and boom ... there's your columns.
Unfortunately, there are a lot of downsides to using this column module.
Problem #1: It doesn't behave as it should (and sometimes it breaks).
Problem #2: It suffers the same limitations as CSS Flexbox ... because it uses Flexbox.
What are the limitations of Flexbox for creating columns?
The major problem is the lack of gap control. Flexbox gap isn't well supported yet. So, you end up needing to use padding in your column divs (which is what the columns module does by default).
This creates new problems:
1. Left and right padding that throws off content alignment with other block level elements in your section.
2. Top and bottom padding that exists for no reason (without top/bottom padding you won't have gaps between rows).
3. Double row padding (because the bottom of one row adds together with the top of the row below it).
4. An inability to create equal height columns (without duplicating your column rows).
5. Lots of additional DOM elements (because your content needs column wrappers).
...
I'm sure there's more I'm leaving out.
The basic conclusion is this: I never use the columns module and I hardly ever use Flexbox for creating layouts.
My general rule of thumb is: Flexbox is amazing at aligning things and manipulating things and Grid is amazing for layouts.
Whether you use Oxygen's default Grid builder controls or OxyNinjas Utility Classes (I show both in this video), Grid is the way to go for achieving columnized content.
If you enjoyed this video, I'd really appreciate a thumbs up and a comment and make sure you're subscribed with the bell so you don't miss more Oxygen tutorials.
PS - Just buy OxyNinja, it's so worth it: go.digitalambition.co/oxyninja/ - Jak na to + styl
Man, wish there was a "Love" button because "Like" just doesn't cut it for this video. Just sayin' is all. Thank you for this! Oh, and yes, please do an in-depth video for OxyNinja utility classes!
Honestly I am so glad you are giving us this many personal pro tips for free. A solid workflow like yours really help us and the oxy community to grow healthily. 🙌
Thanks so much for this, I'm new to Oxy and have been wresting with the column tool so much! This blew my mind.
Another great video Kevin! :) Keep 'm coming!!
I love your tutorials!! Thanks for sharing your awesome tips!!!
Another useful/practical tuts. Thank you!
Very Nice Tutorial..........Your videos are helping me to use oxygen in a better way..........:-)
Very very very gooooood, thank you very much Kevin. I wait for you to make a "very full" and "very soon" Oxininja tutorials, and I promis I will use your affiliate link to buy it 😎!
OxyNinja Grid Tutorial lands tomorrow!
Great video 👍🏻
will be another magic here i guess ... reminder set!
Looking forward to this
Thanks for this great tutorial. I purchasing the core framework via your affiliate link for the support.
Appreciate it, Lyle!
Great stuff, thank you. Just so you know the sound goes mono two thirds of the way through
I cut it and forgot to apply the same sound settings to the 2nd half :/
Notification is set!
To add spacing to flexbox items you give them padding and give negative margin to the container, it works very well.
I preffer to use grid wherever I can but sometimes you have to use flexbox.
At this point I just use gap when I need to use flexbox.
@@Gearyco I initially used flexbox gap until clients who had iPhones started to complain that the layout looks wrong...
Always problems with iOS...
Waiting for that OxyNinja utility classes tut!
Thanks for such a fantastic tutorial and look at everything. Anyone every noticed that it says "Click Add+" yet the button is "+ Add"? ;-)
Dang your videos are useful!
I try! Don't want to make typical nonsense tutorials --- always something practical that helps people do things better/faster/easier/etc.
This is really helpful. I'm surprised the Oxygen columns element isn't as robust as the flexbox version. One thing about grid is that it's still not 100% supported by browsers. But it's almost there.
It has plenty of support and is in widespread use.
Great. Maybe in Oxygen Grid you could also use the Min & Max values for columns... ;)
Grid is super powerful.
Another great tutorial! Thanks a lot! A question: is a good practice to use grid in a 3 cols footer for example?
Sure!
I totally agree with the columns issue in Oxygen, but am using Oxy made, rather than Ninja
thats great thanks. But If I only wanted 2 columns to show regardless of size, even on small. How can I ensure it fits.. logic suggests there should be an option where the system identifies that it needs to make the next smaller in the columns in order to always display the 2 columns, so they adapt to the situation.. I have no idea how to do that though, so I guess im left with trying to make the columns small enough so they will show on small by default
No idea. Would have to see an example of what you mean
dude you rock! do you use swiss army knife ? or oxy extra is it to copy
It must be OxyExtras. I have a hard time keeping up with what plugin adds what functionality after a while because I just install everything from a blueprint and rock and roll.
Thanks again! And do you know, please, why isn't possible to apply oxy class to a section but you have to have another div inside? Thanks! Note: the minimum width of child elements in oxy grid element is again one of that things, when oxygen has set something default behind.
Ninja classes can’t target the default inner-wrap that’s inside oxygen sections. However there aren’t too many use cases where you would want grid classes on sections
My divs and columns don't have any outline. How do you make yours show up? It's so frustrating trying to guess the size
Not sure what you mean. 🤷♂️
Another question Kevin, how do you copy your card and past it elsewhere? Thank you (I'm a new oxy user...)
Hydrogen Pack
is it possible to reverse the layout for mobile responsiveness? So let's say you make a two column layout using Grid and you place your image on the right, On mobile view the image ends up on the bottom. Is there a way to make it so that image placed on the right side can end up on top in the responsive views?
Yes. You can just use the "order" property on a child div inside the grid to put it's order anywhere. So you can move the 2nd child to the first position in a 2-column grid. Or vice versa. Or move column 3 to column 1. It's very flexible.
oxyninja.com/help/reorder-columns/
@@Gearyco Thank you for you tutorials ! I am a real fan. Could you let me know how to use this order property ? I got rid of my columns but I struggle with the layout for mobile responsiveness... Thanks a lot !
@@freedivinglapalma795 So we need oxyninja to ensure the layout for mobile responsiveness ? I wanted to achieve that with OB...
@@anne-camillemonet6467 No, you don't. But I'm a hobbyist/beginner fiddeling round with my own site. So I think there are other people with way more knowledge and experience to answer the question better. Maybe head over to the official oxygen FB Group and ask there. Either you can achieve this with the controls within Oxygen (never tried) or some custom CSS.
Did I see you somehow quickly remove settings from an element in the advanced tab? some kind of shortcut? or magic? or video editing?
What part of the video was it?
@@Gearyco Here czcams.com/video/kSuLN0e4BF8/video.html
About the laggy. I think it is oxy issue it happens after working on a template for a while. Simply save and refresh, the laggy will be gone. 🤔 seems to be worked on my end. Could be the step history causing too much resources taken?
When I record my entire screen it doesn’t happen. When I try to record only part of my screen it happens. Seems to be a camtasia issue.
great. i was sure, i am blind or stupid, seeing columns changing their with on their own :D
I'm guessing that the Grid technique (without OxyNinja) doesn't work if your columns need to be different widths?
Watch my other video on grid utility classes. You can definitely have different width columns.
@@Gearyco Does that not require Oxyninja though?
I am missing something? How do you copy and paste the cards? 14:54
Hydrogen Pack. If you don't have Hydrogen pack you'll have to duplicate the card and then drag it from one area to another in the structure panel.
@@Gearyco Ah ok, i thought it was something native to Oxygen Builder.
@@Xenio2007 Wish it was!
Cant wait for your real tutorial on this without the unnecessary chatter
Good teaching means explaining context :)
You are right about context but there is a balance. You need to decide what you want to say and get right to it. Only trying to be constructive here. You obviously know your subject.
@@bobwilliamso180 which part was unnecessary? I need an example so I know what type of stuff to cut out.
If you look at the tutorial you will see that you are missing the first part which should be " what are we going to do" with visual examples. That should take about 20 seconds. Then get down to " how you will do it". Then you can add some but not too much context. Then you can get down to the meat of the tutorial. I watch many tutorials on oxyen builder and yours seem incredibly interesting but I usually give up before you get to the point.
Also remember that if the title doesnt match the content people will switch off.
Thanks,
Bob Williamson
Please buy Oxymade and do some videos, I'm trying to copy this using Oxymade and it's not working the same :( these are really fantastic videos and If I were doing this full-time I'd subscribe the club.
I’m creating my own class system
It took over 8 minutes until you finally got to the first weak point, which isn't really a bug, but more of an inconvenience. That's really a waste of time.
The beauty of Oxygen is that you have options. Columns, grid, whatever - I don't think there are clear rights or wrongs. Choose what suits you best.
The bug in the video is a definite bug, not just a weak point. When you remove stuff, the columns module breaks completely sometimes and can't be fixed. But overall, using Flexbox to create columnized layouts is full of weak points where Grid isn't. IMO, the weak point of needing padding or margin hacks to create spacing with flex columns is a deal-breaker, but to each their own. That's why I make the tutorials --- so people can see what their options are and choose accordingly :)
no sound at 18 min
It switches to left channel only. Sorry about that. Listen through stereo and you’ll hear it.
Oxyninja is a good solution, but I have free the same CSS code with auto-fit cards. Maybe I buy oxyninja if you show how his help in woocommerce projects
I use this code
.card-grid {
display: grid;
grid-gap: 1em; /*i use 16px defalut font size*/
grid-template-columns: repeat(auto-fit, minmax(273px, 1fr));
}
and I have 2 rows with 3 columns for 1136px width and fully responsive
I use one class when in your video you use 2 classes with (I don't know with many codes)
additional need class for stretch cards
for any designs will be changing a little bit code with minsize from 273px to 250 or any
use
Flexbox - when you need child element's to have control over it's Parent
Grid - when you need parent element to have control over it's children
How do flex children control their parent?
BREAKING NEWS: Mothers protest across the country, blaming Digital Ambition's release of new video on Mother's Day. Many are feeling abandoned by their children who chose to learn about columns and grids rather than celebrate the holiday. One such person (who wished to remain anonymous) said that by practicing the techniques taught in this video, he would be able to spend much more time with his mother throughout the year, and that soon mothers everywhere would benefit.
It's a travesty, but it's for the greater good.
The content of the tutorial is briljant but omg you talk a lot on repeat. Tutorials can be 10 minutes 😂 but thanks!
People can fast forward or play at faster speed if they want. I add as much teaching and context as possible for those who want it. It’s free, so…
@@Gearyco ok haha you could’ve said thank you... just a small criticism what you noticed yourself. You say multiple times yourself your babbling to much 😂
@@bertusdeleeuw thank you! Don’t know what I’d do without you.
elementor is so much better....... idk why they made oxygen so damn different.
It’s not better in terms of DOM structure though. Elementor is terrible in that capacity.