# Creating a Responsive 3-Column Layout

## Overview

This tutorial shows how to use the [Avonni **Columns** component](/dynamic-components/components/columns.md) 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.

<figure><img src="/files/96l8Efh6NAWnpD9eFauo" alt="" width="323"><figcaption></figcaption></figure>

### **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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/tutorials/components/columns/creating-a-responsive-3-column-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.