Creating a Responsive 3-Column Layout

Overview

This tutorial shows how to use the Avonni Columns component to create a layout with three columns that appear side-by-side on large screens but automatically stack vertically on smaller screens (like mobile devices).

Goal: Achieve a 3-column layout on desktops/tablets that becomes a single-column layout on phones.

Steps

Step 1: Add the Columns Component:

• Drag the Columns component from the Component Library onto your canvas. This component acts as a container for your individual columns.

Step 2: Add Three Column Items:

• Select the Columns component you just added.

• Find the section for managing the columns within the Properties Panel (right side).

• Click the "+" button three times to create three individual column containers within the main Columns component.

Step 3: Configure Responsive Sizes for Each Column:

• Concept: Most layout systems use a grid (often 12 units wide). You'll tell each column how many units to occupy on different screen sizes. Each column must take up the full width (12 units) to stack on small screens. To be side-by-side on large screens, each needs less (e.g., 4 units for a three-column layout).

• Select Column 1: Click on the first column item within the Columns component's properties.

  • Set Size (Large Container) (or similar property for large screens) to 4.

  • Set Size (Medium Container) (or similar for medium screens) to 4.

  • Set Size (Small Container) (or similar for small screens) to 12.

• Select Column 2: Click on the second column item.

  • Set Size (Large Container) to 4.

  • Set Size (Medium Container) to 4.

  • Set Size (Small Container) to 12.

• Select Column 3: Click on the third column item.

  • Set Size (Large Container) to 4.

  • Set Size (Medium Container) to 4.

  • Set Size (Small Container) to 12.

Step 4: Configure Overall Columns Component Settings (Optional):

• Select the main Columns component again.

• Horizontal Alignment: This controls how the group of columns aligns within its available space (e.g., Start, Center, End). Choose Start if you want them aligned to the left.

• Vertical Alignment: This controls how the content within the columns aligns vertically if the columns have different heights (e.g., Top, Center, Bottom). Choose Top for standard alignment.

• Allow Wrapping: Ensure this option (if present) is enabled. This allows columns to move to the next line when they don't fit horizontally. It's usually enabled by default.

Step 5: Add Content and Preview:

• Drag other Avonni components (Text, Images, Buttons, etc.) into each of the three columns you created.

• Use the Preview button. Resize your browser window to see how the columns automatically stack vertically on smaller screens and appear side-by-side on larger screens.