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!
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.
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!
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 )
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?
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?
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)).
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
This saves a lot of time. i use it on my company site, and it got much better. Thank you for sharing this tutorial.
I'm a self-taught Bricks user in Korea, and I really appreciate you making this video!
As I begin my migrqtion from Elementor to Bricks, your videos are proving to be invaluable. Thank you so much.
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!
Bricks is so powerful, and with your tips they make it even better. thanks a lot ! Hug from France.
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.
I refer back to this video on almost daily basis. Thank You very much
You just sold me on using Bricks. LOVE THIS!
I really appreciate you with the very valuable tutorials for completely free!
Excellent ! Thanks 👍
Thank you very much 🙏
Very nice, short and knowledgeable tutorial
what a gem you are - thank you -explained it beautifully
That’s what I was looking for! Thank you
So helpfull tutorial, thanks❤
Great Tutorial!
I'm learning bricks and your videos are very helpful to understand concepts!
Thank you! Keep uploading!😊
Fast and clear, new subscriber. Thank you!
Thanks, I'm learning a lot! God bless you more 🙏
Love this type of Tuts. Thanks very much once again. 😃
My pleasure!
Thank you! Already updating and improving my site with advice of yours. Five stars!
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!
Such an amazing explanation, thank you so much!!
Excellent work!
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 )
Great content. Thank you again.
Thank you. This was very useful to learn!
🎉Absolutely amazing as always.
Super useful. Thanks so much!
thank you bro! 🎉are you going to do some more tutorials for bricks in future?
Sure!
Superb Boss!! ❤❤
Excellent !
repeat(auto-fit, minmax(280px, 1fr))
great tutorial thanks
Prima! Dank je wel.
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?
Yes, absolutely
Can you give an example of how this would be done? I'm not great with advanced CSS features.
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?
Cảm ơn bạn!
Thank you!
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
Not with auto responsive grid.
Brilliant! Can this be combined with Clamp?
I believe so, you just need to place it at the appropriate place if you know exactly what you want to achieve
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)).
Yes you should use flex. Reversing with grid is possible through a hack, but not recommended for accessibility.
@@DesignwithCracka OK perfect thank you 🖖
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.
Recorder is OBS, but editing and zoom done in camtasia.
And would this approach work with a post loop query?
Yes
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