> ## Documentation Index
> Fetch the complete documentation index at: https://loops.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Columns

> Arrange email content side-by-side with layouts of 2 to 4 columns.

Columns allow you to arrange content side by side, creating dynamic layouts for your emails. You can use columns to place elements like images, text, buttons, and more next to each other.

<Note>
  You can use layouts of 2 to 4 columns. Nesting columns within columns is not
  yet supported.
</Note>

## Adding columns

You can add columns to your email in several ways:

* **Using the editor toolbar**: Click on the columns icon to insert a column layout.
* **Using the `/` slash menu in the editor**: Type `/` to open the slash menu then start typing "columns" or click on the **Columns** option.
* **Using the `+` icon**: hover over an existing element in your email and click the `+` plus icon on the left, then select **Columns**.
* **Dragging two blocks together**: Click and hold the block settings icon (six dots) to the left of a block. Drag the block next to another one until you see a vertical gray line on the right, which indicates a new column will be created.
  <img src="https://mintcdn.com/loops/K9TRANbphBauR0pJ/images/columns-dragging.png?fit=max&auto=format&n=K9TRANbphBauR0pJ&q=85&s=dae31de77bb07cb9df441869dd50b959" alt="Adding columns by dragging blocks together" width="2280" height="1412" data-path="images/columns-dragging.png" />

## Customizing columns

Once you've added columns, you can customize their appearance and behavior to suit your design needs.

### Number of columns

You can choose the number of columns you want to use by clicking on the number of columns you want to use in the **Block styles** editor panel.

<img src="https://mintcdn.com/loops/kF68-ul1tTnhAWQb/images/column-count.png?fit=max&auto=format&n=kF68-ul1tTnhAWQb&q=85&s=33bea95470931d4869b19ed9ae2b93a2" alt="Number of columns option" width="2280" height="1296" data-path="images/column-count.png" />

If you decrease the number of columns, the content of the farthest right column is moved to the bottom of the new right-most column.

### Width and spacing

You can adjust the width of a column by clicking and dragging the gray bar between the columns.

<img src="https://mintcdn.com/loops/K9TRANbphBauR0pJ/images/column-width.png?fit=max&auto=format&n=K9TRANbphBauR0pJ&q=85&s=fdf7971f078124c2eb9c8505ddcfc706" alt="Adjusting column width" width="2280" height="1074" data-path="images/column-width.png" />

You can also adjust how much space appears between columns by dragging the green bar between the columns.

<img src="https://mintcdn.com/loops/K9TRANbphBauR0pJ/images/column-spacing.png?fit=max&auto=format&n=K9TRANbphBauR0pJ&q=85&s=e5baf0c24d79fceb04d96b521f57c2dd" alt="Adjusting column spacing" width="2280" height="1074" data-path="images/column-spacing.png" />

### Stacking columns on mobile

When emails are viewed on a mobile device (when there is less horizontal space available) you can choose if your columns should stack vertically for better readability or stay as columns.

In the **Block styles** editor panel you'll find the option to stack columns vertically on mobile (when the viewport is 479px or smaller).

<img src="https://mintcdn.com/loops/aOtgyczWtTw7x5Xz/images/mobile-stacking.png?fit=max&auto=format&n=aOtgyczWtTw7x5Xz&q=85&s=8eaf77fe2ad8e91f7ff7021f00f77058" alt="Mobile stacking option" width="2280" height="1296" data-path="images/mobile-stacking.png" />

### Adding and moving content

You can drag elements like text blocks, images, and buttons in and out of your columns.

To do this, hold down the `⌘` key (Mac) or `Ctrl` key (Windows) while hovering over the element you want to move. Then click and drag the block settings icon (six dots) to move the block to its new position.

<img src="https://mintcdn.com/loops/I7MiNuGd9K5dwTEQ/images/drag-into-column.png?fit=max&auto=format&n=I7MiNuGd9K5dwTEQ&q=85&s=d50f45663921445d609df9888a3528ea" alt="Drag an element into a column" width="2280" height="1074" data-path="images/drag-into-column.png" />

## Tips

* **No nested columns**: Keep in mind that nesting columns within columns is not supported. If you need a complex layout, consider adjusting your design to fit within the 2 to 4 column limit.
* **Consistent styling**: Use the block settings to ensure that padding and alignment are consistent across your columns for a polished look.
