# Grids

<details>

<summary>✅ Atualizado (29/01/2025)  - Ver detalhes</summary>

## Janeiro

* **29/01/25**

  Criada toda documentação e definições dos novos grids.

</details>

## Anatomia

<div data-full-width="true"><figure><img src="/files/GvGjzRtjnQY6WKQExFsC" alt=""><figcaption></figcaption></figure></div>

{% stepper %}
{% step %}

### Canvas

Tamanho total do frame, equivale a resolução definida do grid para a criação de novos layouts.

*canvas vertical: desktop, mobile e tablet*\
*canvas horizontal: mobile e tablet*
{% endstep %}

{% step %}

### Tamanho do grid

O tamanho do grid é definido a partir da resolução, considerando margem, gutter e colunas. A margem e o gutter sempre são fixos e as colunas são fluídas.

*Tamanho máximo: 1584px*
{% endstep %}

{% step %}

### Margin do grid

A margin do grid refere-se ao espaço mínimo fixo que delimita as bordas externas do layout e evita que os elementos fiquem colados às extremidades da tela.

*Desktop: mín. de 84px Tablet: 24px Mobile: 16px*
{% endstep %}

{% step %}

### Content

Área útil do grid é a região central destinada à disposição dos elementos do conteúdo principal, desconsiderando as margens do grid.

*Tamanho máximo: 1416px*
{% endstep %}
{% endstepper %}

## Colunas, Margins e Breakpoints

<div data-full-width="true"><figure><img src="/files/9bWlz3wZsMEWxatzKndp" alt=""><figcaption><p>Acima as representações visuais das colunas, margins e breakpoints.</p></figcaption></figure></div>

<table><thead><tr><th width="256">Largura da tela / Breakpoint</th><th width="120">Margin</th><th width="153">Content Grid</th><th width="105">Colunas</th><th>Gutter</th></tr></thead><tbody><tr><td><code>&#x3C;700px</code></td><td><code>16px</code></td><td>adaptável</td><td>12</td><td>16</td></tr><tr><td>≥ <code>700px</code> até  <code>1199px</code></td><td><code>24px</code></td><td>adaptável</td><td>18</td><td>16</td></tr><tr><td><code>≥1200</code> até ∞ </td><td>mín <code>84px</code></td><td>máx <code>1416px</code><mark style="color:red;"><strong>*</strong></mark></td><td>18</td><td>24</td></tr></tbody></table>

{% hint style="danger" %}
**Exceção**

Para artigos de leitura como blog e termos de uso a limitação do *content grid* é até **696px**, mantendo as mesmas regras de colunas e margins de acordo com os breakpoints.

Essa limitação existe para promover uma leitura mais confortável na tela.
{% endhint %}


---

# 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://compasso.studiosol.com.br/foundations/grids.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.