Responsive design with Bricks

In every page I’ve developed previously, I used a Bootstrap type layout grid that incorporated negative margins and simple column widths with padding.
For example, I want to create a layout with 4 columns on desktop, 2 columns on mobile. How can I achieve this using Bricks? When I set my column to 50% on a mobile (with flex wrap in the container), they don’t fit in a row due to the gap.

yep that is a problem actually.
best way to fit it is to leave the width auto leave empty and let them fit auto.

I usually fix this by flex:1 on custom CSS when needed.
otherwise I keep the width auto as much as I can.

Can you help me make an example? :blush:

I want two columns on mobile (50%).

Use Grid.

No need to set widths on the items in the grid.

Hey,
thank you for the video! The explanation very clear. However, there’s a challenge in explaining the repeat() function to clients. Although it’s a minor issue but repeat() does not work in IE.

I haven’t had the opportunity to explore Bricks’ features yet. I’m hopeful that it allows for adding extra fields in the container settings. It would be possible to add a custom select with options for the number of columns and, based on that choice, apply custom styles using the ‘repeat’ function.

I’m hopeful that it allows for adding extra fields in the container settings

Yes…

you dont want to give bricks editor to client
if you really really have to
keep the containers as simple as possible. stay with flex and keep it simple.

maybe even create some custom classes for containers and create a simple methodology/standard to make containers.

you can setup your classes/containers and only assign later where you need it. until global components comes this is the best way probably.
but still clients shouldn’t touch editor in the first place :slight_smile:

that’s why we have posts pages and post types taxonomies fields. we create custom data points for clients to fill the content if they regularly need to publish something.

anyway global components will solve this very soon…

Since I work in frontend programming, I really enjoy setting up all elements globally (like typography, colors, buttons, header, footer, etc.) in my theme css. Some clients need a content editor where they can see the design in real time. Previously, I used Elementor, where you can disable unnecessary settings (such as colors, borders, margins, etc.). I only leave the layout placement (column width choices) and custom programmed widgets for the client. The spaces between columns and sections are already programmed, and their adjustments are disabled. I also deregistered and dequeued all Elementor frontend styles and scripts, and wrote some layout CSS lines to match Elementor classes. I want to achieve the same with Bricks (easy layout building), because I really like Bricks for its performance and clean code.

keep practicing its possible so many ways to solve that.

and when this comes so many needs will be solved all together
cant wait