Everything you want to know about CSS Grid in Bricks

OxyProps v1.4.10 introduces new context menus for Bricks to make all the framework CSS properties available for the new CSS grid features in Bricks v1.6. Let's use it to discuss all CSS grid properties, and recreate together the main grid utility classes offered by OxyProps to understand how they work.
🎉 Get OxyProps while it is on LTD !
OxyProps: oxyprops.com
🔗 Links
⌚ Timestamps
00:00 - Introduction
00:45 - The o-super-centered class
04:00 - N columns of equal width (Repeat function).
14:30 - Asymetrical grids.
15:50 - Sidebars (Minmax function).
21:20 - Ram-fill and ram-fit (auto-fill and auto-fit keywords).
30:00 - RAM (Repeat Auto-fit Minmax): a complex grid.
32:45 - 12 columns grid
34:30 - Grid auto flow
37:15 - Grid auto columns / Grid auto rows
39:10 - Oxyprops 12 grid helper lines
40:40 - Dealing with children elements
41:43 - Grid structure in chrome dev tools
42:40 - Start line - Grid column / Grid row
43:50 - Span - Grid column / Grid row
44:32 - Start / End - Grid column / Grid row
47:00 - Responsive design
48:30 - Span from / span to - Grid column / Grid row
#cssframework #bricksbuilder #oxyprops
___
Come hang out with other OxyProps users ans Oxygen lovers in our Facebook Community
💬 / oxyprops
___
My editor:
VS Code - code.visualstu...
My Terminal Enhancements:
OhMyZSH: ohmyz.sh/
Powerlevel10k: github.com/rom...
___
Find OxyProps on the internet :
Facebook: / oxyprops
Twitter: / oxy_props
Github:
___
And don't forget that if you can design it with WordPress, you can style it with OxyProps!

[@John.Rearden]

I recently found out about oxyprops.
Your contextual menus are a work of art, what an idea, brilliant.
Don’t hear about oxyprops in the bricks forums as much as I hear about other tools and add ons.
I reckon it has to do with dedicated branding. I reckon people associate Oxyprops for Oxygen. Food for thought.

[@OxyProps]

Thanks for your message.
Yes, I know I focus more on development than marketing. Other plugins do the opposite. Thay may be right...
I developped first it for Oxygen, so OxyProps. Then I did not change the name when supported other builders. I will probably change for a more general name in the future.

[@thewebart]

Thank you for sharing. Love your accent!

[@OxyProps]

I do my best but I have to be realistic, I will never sound like a native speaker...

[@PatricioAsencio]

Wuau, tuve que ver el video 4 veces, pero al final entendí todo lo que explicaste, muchas gracias por tu tiempo. Pienso que me costo un poco entender por que primero tenía que conocer bien la metodología de la cuadricula. Nuevamente gracias y un abrazo.

[@OxyProps]

Gracias! so nice to see it was helpful for you.

[@briansteeleca]

OxyProps Grid implementation is great! Thanks for explaining everything so well in this video. 👏

[@OxyProps]

Thanks for you kind comment!

[@GrantHawkey]

I’d be keen to see a full feature video Paul 👍

[@OxyProps]

You mean a dullBricks features, or full Oxyprops features ?

[@dandrevs]

Very well explained. Will be building a new project soon with Bricks and BricksProps, so I'll probably hang out in the group more often. I have a feeling I'll have plenty of questions.

[@ernestoserrathmontecino8914]

Huge thank you from me, this was very helpful and easy to understand.
Could you make a tutorial on how to make a dynamic image gallery, from a CF of a CPT. (If it's possible)?

[@OxyProps]

This can be a topic for a future video.

[@olafurgumundsson6475]

Thank you. This was very useful for me.

[@OxyProps]

Glad this helped you.

[@Mazahaka007]

Amazing! Thank you!

[@OxyProps]

My pleasure.

[@BGdev305]

But how does this work with Query Loops? Do you just create one column, and then how do the columns get created? How do you control the columns or rows?

[@OxyProps]

Sure it does. You create the grid at the parent container level. Then the query loop creates children that will populate the grid. Columns and rows are created by the algorithme according to your grid definition.

[@kareem2928]

Well explained. Thank you.
I hope you don't put in future background music... It is annoying. This kind of video needs to focus.

[@OxyProps]

There is some in all of my videos. But maybe this time it is too loud.

[@PicSta]

@@OxyProps yes, this time the music is louder, so it's distracting and makes it harder to follow what you're saying.

[@goshenweb]

I totally agree with the comment on the background music. It serves absolutely no value to us the viewers., rather it is a big distraction to the very valuable content you teach. Please consider not using background music in your very informative videos going forward. If we need music, we know where to get it…lol. Thanks for your consideration. Much love and respect to you.

[@OxyProps]

I heard you guys, no music in my last video!

[@kareem2928]

@@OxyProps YES ♥