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

# Use colunas para layouts responsivos

> Use colunas para criar layouts responsivos, organizar o conteúdo lado a lado e montar landing pages estruturadas em todos os dispositivos.

As colunas permitem dividir uma seção em várias áreas verticais para posicionar o conteúdo lado a lado.

Elas são essenciais para criar layouts estruturados, como:

* Texto + imagem
* Grades de recursos
* Seções com várias colunas

### Como adicionar colunas

* Abra a barra lateral esquerda
* Vá até **Layout**
* Arraste **Columns** para dentro de uma seção

***

## Configurações das colunas

Depois de selecionar as colunas, você verá os controles no painel da direita.

### Layout por dispositivo

Você pode definir layouts de colunas diferentes para cada dispositivo:

* **Desktop** → escolha quantas colunas (de 1 a 6)
* **Tablet** → ajuste o layout para telas médias
* **Mobile** → normalmente com 1 coluna, para facilitar a leitura

👉 Isso garante que seu design seja responsivo em todos os dispositivos.

***

## Ajustando a quantidade e o tamanho das colunas

Você pode controlar facilmente tanto o número de colunas quanto o espaço que cada uma ocupa.

* Selecione o elemento **Columns**
* Abra o **painel de configurações** à direita

### Mude a quantidade de colunas

* Escolha um layout pré-definido (2, 3, 4 etc.)

### Ajuste a largura das colunas

Há duas formas:

* **Arrastar visualmente** → arraste o divisor entre as colunas diretamente na tela
* Assim você muda rapidamente a proporção de largura (por exemplo, 70/30 ou 50/50)

***

## Gap (espaço entre colunas)

* **Gap** controla o espaço entre as colunas
* Medido em pixels (px)

Exemplo:

* Gap: 0 → as colunas ficam encostadas
* Gap: 20 → adiciona espaço entre as colunas

***

## Como as colunas funcionam

* Cada coluna funciona como um contêiner
* Você pode soltar elementos dentro de cada coluna
* As colunas ficam dentro das seções

Exemplo de estrutura:<br />Seção → Colunas → Elementos

***

## Observações importantes

* As colunas precisam estar dentro de uma seção
* Cada coluna pode conter vários elementos
* Você pode mudar o layout por dispositivo para uma responsividade melhor