Creating a Responsive 3-Column Layout
Last updated
Was this helpful?
Last updated
Was this helpful?
This tutorial shows how to use the 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.
Drag the Columns component from the Component Library onto your canvas. This component acts as a container for your individual columns.
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.
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.
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.
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.
