How to create dynamic columns in builder.io

Technical Questions
1

What are you trying to accomplish
We need to have dynamic columns in builder.io 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
NextJS

2

Hi @samnagaraj, and thank you for contacting Builder.io 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 - Builder.io
  2. Adjusting Column Behavior - Builder.io
  3. Using Columns to Build Responsively - Builder.io
  4. How to Make a Multi-column Section - Builder.io

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 - Builder.io 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!

3

Thanks for your reply,

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