---
title: "Grid | GoodBarber's Design System"
description: "This section deals with the organization of space, i.e. the layout of visual elements on the pages: alignments on the **grid**, the **margins** option, the management of **vertical and horizontal spaces** between and inside the elements."
canonical_url: "https://www.goodbarber.com/uxdesign/grid/"
lang: pt
---

# Grid | GoodBarber's Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Grid

Foundations

Grids align elements and organize space to ensure a consistent layout across pages and devices. They also support responsiveness, scalability, and balance in applications.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/grid.55011e52a713.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/grid.55011e52a713.mp4)

## Introduction

This section of the design system is all about how to organize the space on a page. It covers things like using a **grid** to align elements, using **margins** to create space around the edges, and managing the **vertical and horizontal space** between and inside elements. It's all about making sure that the layout looks balanced and easy to understand.

The grid in our design system is a framework of horizontal and vertical lines that are used to align and organize visual elements on a page or screen. The grid serves as a guide for layout and typography, helping to create a balanced and structured design that is easy to read and navigate.

The grid provides a consistent structure and alignment across different elements on the page, and help to create a cohesive and polished design.

## Number of columns per device

The widths of the gutters and the margins are fixed, while the widths of the columns vary according to the devices.

![Building grid by device](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Grid-Columns.3ef07be1bf73.png)

*Building grid by device*

## Gutters size

The gutters are the empty space between columns.

The gutter sizes listed below will be used as a value when spacing elements in templates. This unit will be symbolized by the letter "**G**" throughout this document.

![Gutters by device](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Grid-Gutters.82da320ab988.png)

*Gutters by device*

## Margins size

The margin option will create a "frame" around the content elements. **The gutter's size stays the same, it’s the width of the columns that varies.**

![Margins by device](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Layout-Grid-Margins.6bfddfb45b58.png)

*Margins by device*

### Margin option

The margins only impact the content of the page, as in the example below where the navigation remains intact:

[Foundations-Grid-Margin-Option-Video](https://player.vimeo.com/video/764851300?h=786f983f5f&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)