Columns

The Columns component gives you powerful control over the layout and arrangement of your Dynamic Components.

Setting Up Your Columns

1. Configure Overall Layout

Before you add content to your columns, it's helpful to define the overall layout and structure of the Columns component.

Horizontal Alignment

This setting determines how the entire grid of columns is positioned horizontally within its container.

• Left: Aligns the columns to the left side of the container.

• Center: Centers the columns within the container.

• Right: Aligns the columns to the right side of the container.

This is useful for ensuring your content looks balanced or aligned according to your design intent on different screen sizes.

Vertical Alignment

This controls the vertical positioning of the columns within the container.

• Top: Aligns all columns to the top of the container.

• Middle: Centers the columns vertically.

• Bottom: Aligns all columns to the bottom of the container.

This setting is crucial for layouts with varying column heights, ensuring all columns align uniformly.

Allow Wrapping

When checked, this option allows columns to wrap onto new rows if the screen size or container width does not accommodate all columns on a single line. This is essential for responsive design, ensuring your layout remains functional and aesthetic across different devices.

2. Create Columns

Once you've set the overall layout, you can add individual columns to your component.

Add Columns

3. Customize Each Column

After adding your columns, you can customize each individually to achieve your desired layout and appearance.

Fixed or Flexible Width

• Fixed: Sets a specific width for the column. This is useful when you need exact control over the layout, like for headers or specific content areas that shouldn't resize with the screen.

• Flexible: The column's width will be dynamic, and adjustments will be made based on content and available space. This is ideal for responsive design, where content size can vary.

Flexibility: For flexible columns, you can further fine-tune their behavior using the "Flexibility" setting:

• Auto: The column will adjust its width automatically based on the content and available space.

• Shrink: The column can shrink if there is insufficient space to display all columns in a single row.

• Grow: The column can grow to fill any extra space in the container.

• No-Shrink: Prevents the column from shrinking, even if space is limited.

• No-Grow: Prevents the column from growing, even if extra space is available.

• No-Flex: Disables flexibility altogether, making the column behave like a fixed-width column.

Alignment Bump

This setting lets you control how the column aligns with adjacent columns. You can "bump" the alignment to the left, right, top, or bottom to create visual separation or grouping between columns.

Padding

You can adjust the padding to add spacing around the content within a column. Choose from different padding options to add space to the column's left and right sides or all sides.

Adjusting these settings allows you to create complex and responsive layouts that adapt well to different viewing contexts, ensuring your design looks good and functions effectively across various devices and screen sizes.

Tutorials

Creating a Responsive 3-Column Layout