Skip to main content

Column & Column Break - Layout Components

The purpose of this component is to add columns in a row inside a container to design the layout of a website.

Remember, you can't drop a column directly into a container, it can only be dropped inside a row.

Adding a Column​

To add a column, go to the “Layout” category under the Components panel and drag and drop the "Column" component in the canvas.

DrapCode Builder Column

Column Settings​

You can add multiple columns in a row and that's where the column settings come in use. You can adjust the size of each column separately.

DrapCode Builder Column

Adding Multiple Columns​

#1. Drop the Columns​

Once you have added a row in a container, you can drop multiple columns in it. Each column by default would be of equal size.

DrapCode Builder Column

#2. Adjust the Column Size​

After adding the columns adjust each column's layout size separately in a ratio of your choice.

DrapCode Builder Column

Column Break​

The purpose of this component is to add space between two columns.

Adding a Column Break​

To add a column break, go to the “Layout” category under the Components panel and drag and drop the "Column Break" component in the canvas.

DrapCode Builder Column