Auto Responsive Grid layout in Bricks Builder | No Breakpoints | WordPress Tutorial

[@jose-kb1dg]

This saves a lot of time. i use it on my company site, and it got much better. Thank you for sharing this tutorial.

[@ElementoryMyDearWatson]

As I begin my migrqtion from Elementor to Bricks, your videos are proving to be invaluable. Thank you so much.

[@koreanmeals7040]

I'm a self-taught Bricks user in Korea, and I really appreciate you making this video!

[@adamu6941]

Bricks is so powerful, and with your tips they make it even better. thanks a lot ! Hug from France.

[@erhardmostert4616]

I refer back to this video on almost daily basis. Thank You very much

[@wppagebuilders]

This is a great tutorial on creating auto responsive grid layouts in Bricks! I really like how you break down the concept of using the autofit function with the min-max function to achieve responsiveness without media queries. Setting a minimum width for the cards ensures they don't collapse below a certain point and the autofit fills the remaining space efficiently. Playing around with the minimum width value allows you to control the number of columns at different viewports. This is a valuable technique for anyone working with Bricks! Thanks for sharing!

[@OJGamingYT]

Thank you! I am still trying to remember all this complex css grid stuff, but this is a must. I typically make a section with this but instead of auto-fit I set it to 6 grids, and have a column inside that span 6/6, this makes it feel like a modern ui that never breaks.

[@Sebastien_Dottin-SDOweb]

Excellent ! Thanks 👍

[@andrewslabbert4316]

You just sold me on using Bricks. LOVE THIS!

[@roeslanaslanyan]

I really appreciate you with the very valuable tutorials for completely free!

[@diagosa]

So helpfull tutorial, thanks❤

[@VM_PARMAR]

Great Tutorial! I'm learning bricks and your videos are very helpful to understand concepts! Thank you! Keep uploading!😊

[@kpitonak]

That’s what I was looking for! Thank you

[@Sashad2003]

Thank you very much 🙏 Very nice, short and knowledgeable tutorial

[@ernestoserrathmontecino8914]

Love this type of Tuts. Thanks very much once again. 😃

[@DesignwithCracka]

My pleasure!

[@jenniferward6821]

what a gem you are - thank you -explained it beautifully

[@BestMLMDXN]

Dear Sir, how are you resizing screen to check different responsives ? Are you dragging browser ? I am using Chrome browser ? Please guide ? Your videos are very informative and helps a non developer like me. I shifted completely from Elementor to Bricks. Please make more videos on Bricks. Stay safe, healthy and happy. With warm regards, Vivek Kumar ( Dehri On Sone, Bihar, India )

[@quickend01]

You have a great, clear, simple way of teaching. As a novice, I really appreciate your and your teaching style and look forward to more of your content. Thank you!

[@Taten210]

Fast and clear, new subscriber. Thank you!

[@VascoDanielBaiao]

Thank you! Already updating and improving my site with advice of yours. Five stars!

[@visualmodo]

Excellent work!

[@Itstherealrandy]

Such an amazing explanation, thank you so much!!

[@kingfisher009]

Thanks, I'm learning a lot! God bless you more 🙏

[@nefertari82]

Thank you. This was very useful to learn!

[@anjon-roy]

Superb Boss!! ❤❤

[@LearnCodeBuild]

🎉Absolutely amazing as always.

[@kakenetit2]

Great content. Thank you again.

[@sinchro]

Prima! Dank je wel.

[@kevinroberts3789]

Super useful. Thanks so much!

[@-ct-celcomtechniques2566]

Excellent !

[@rudyhanusek424]

thank you bro! 🎉are you going to do some more tutorials for bricks in future?

[@DesignwithCracka]

Sure!

[@ngoclamlai]

Cảm ơn bạn!

[@DesignwithCracka]

Thank you!

[@hairy7653]

great tutorial thanks

[@Yannick.D]

repeat(auto-fit, minmax(280px, 1fr))

[@fuadsyawal7461]

I love your videos. So helpful, to the point, and replicable. Can you make a simple menu that is also responsive like this? for example a logo on the left side, menu after that, and contact button on the right. And, when switched to mobile it still keeps its structure except the menu is on the right and the menu is in the middle?

[@pedrocosta3818]

Very nice! This is so useful! Would it be possible to improve the functionality using css variables to calculate the min size with the site width divided by the number of columns plus 1?

[@DesignwithCracka]

Yes, absolutely

[@SuperIce6374]

Can you give an example of how this would be done? I'm not great with advanced CSS features.

[@IssaKhlief]

Great, is there a way to make a grid of 4 breaks to a grid of 2 once each card reaches a certain size? The above example will do it 4, 3, 2, then 1

[@DesignwithCracka]

Not with auto responsive grid.

[@wpmitplan]

Amazing thank you for the value you give us. Off topic, but can you tell me which screen recorder you use? I like the zooming in of a screen fraction.

[@DesignwithCracka]

Recorder is OBS, but editing and zoom done in camtasia.

[@DaleDonnolly]

Awesome Thanks. How can we reverse the layout of the blocks when using Grid layout? This option seems to only be available when using flex layout. I am using 2 columns > repeat(auto-fit, minmax(400px, 1fr)).

[@DesignwithCracka]

Yes you should use flex. Reversing with grid is possible through a hack, but not recommended for accessibility.

[@DaleDonnolly]

@@DesignwithCracka OK perfect thank you 🖖

[@chantscreen]

And would this approach work with a post loop query?

[@DesignwithCracka]

Yes

[@chantscreen]

Brilliant! Can this be combined with Clamp?

[@DesignwithCracka]

I believe so, you just need to place it at the appropriate place if you know exactly what you want to achieve

[@eljedi_com]

what happend when you want 4 columns in desktop but 2 columns in mobile? if you set for a mobile you will get 6 columns in desktop and not 4... Responsive grid it is not the way