# Layout

## 8-point Grid System <a href="#id-8-point-grid-system" id="id-8-point-grid-system"></a>

The layout grid is used as a reference to build and position all the components. It also helps to define the spacing between different elements, improving data consumption through better legibility.

All the UI elements and the spacings around them (paddings, margins, and gutters) align to an 8x8 square baseline grid for all viewport sizes, using multiples of 8 (8px / 16px / 24px / 32px / 40px / 48px / 56px and so on) to reach an aesthetically pleasing composition.

<figure><img src="/files/l4kCQYk1kWErhO8fhFoC" alt=""><figcaption></figcaption></figure>

This system will help us create consistency across layouts and also ensure predictability when building and placing new elements.

Grids help us work more efficiently, reducing the number of decisions to make while maintaining a quality rhythm between the elements. It also ensures the entire system shares the same visual language between designers and developers.

<figure><img src="/files/mSDJYI6iqv9L2QwOY9Fj" alt=""><figcaption></figcaption></figure>

## Column system <a href="#column-system" id="column-system"></a>

A 16-column grid is used to distribute the elements evenly and horizontally. With this structure, all layouts will be built on the horizontal axis with an equal amount of white space (16px) separating the columns.

<figure><img src="/files/zuCcT0rPlGJ1Dppzpje0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ycnDvAZglnny7ccv4xXM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/OiWWqWSNqyKzNgrN0ptN" alt=""><figcaption></figcaption></figure>

## Gutters <a href="#gutters" id="gutters"></a>

This is a flexible system that allows for a lot of different combinations. The padding inside the modules matches the outer margin, with a total of 16px. For closely related content, consider a gutterless grid. Apply gutters when content warrants more separation.

<figure><img src="/files/gkAeZcbjg5Xcq2CEW3iY" alt=""><figcaption></figcaption></figure>

## Breakpoint Table <a href="#breakpoint-table" id="breakpoint-table"></a>

In this table we define the values for the different breakpoints we target with our responsive design:

| Breakpoint | Type   | Columns | Padding | Margin |
| ---------- | ------ | ------- | ------- | ------ |
| >= 360px   | small  | 4       | 16px    | 16px   |
| >= 768px   | medium | 8       | 16px    | 16px   |
| >= 1152px  | large  | 16      | 16px    | 16px   |

## Responsive layout <a href="#responsive-layout" id="responsive-layout"></a>

These are the points at which our components and content will respond to provide the user with the best possible layout to consume information and interact with the elements on the screen.

<figure><img src="/files/k5W3hteMtjIDPetgh5HF" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Tph6Z4WPHPgT3Ov6Sj5Q" alt=""><figcaption></figcaption></figure>


---

# 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://legacy-docs.aragon.org/developers/tools/aragonds/guidelines/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.