How to create dynamic columns in

What are you trying to accomplish
We need to have dynamic columns in based on the screen size
3 columns when the screen width is greater than 1599 and 2 column when the screen is less than 1599.

Guide us how to acheive it

Code stack you are integrating Builder with

Hi @samnagaraj, and thank you for contacting Forum!

Builder column block is automatically responsive for each breakpoint and adapts to any screen size by default.

Related doc:

  1. Getting Started: Step 2 -
  2. Adjusting Column Behavior -
  3. Using Columns to Build Responsively -
  4. How to Make a Multi-column Section -

For your scenario, you want different layout for each breakpoint. There’s multiple way to achieve this:-

  1. Easy way to use Builder column block separately for each breakpoint with required layout and set device visibility to each in style tab. Refer this doc: Builder best practices - for hiding a block.

  2. Another way, you change the wrapper component to Grid or Box and then use CSS Flex-Box to achieve what you are going for. You can then use responsive styling to set the column layout for desktop/tablet/mobile to achieve the exact look you are going for.

Let us know if you face any issues while achieving this!

Thanks for your reply,

We need more than 3 default breakpoint. Let us know how to setup?