---
description: How to configure a layout grid
---

# Configuring layout grids

## What is a Layout Grid

Layout Grid creates a unified and recognizable style for your publication by effectively organizing your content.

Setka Editor uses column grids — the basic grids in graphic design. In addition to that, you get horizontal rows constructed depending on your font size. Their configuration depends on the number of columns, margins, and gutters.

Column grids help develop a design for various devices: computers, tablets, and mobiles. Columns provide necessary limitations that enable you to arrange the content efficiently and coherently.

Setka Editor provides four layout grids by default: with 6, 8, 10, and 12 columns.

## How to add a Layout Grid

You can add as many of your layout grids as you like. To do it, click **Add Layout Grid**. Then specify the number of base columns, the gutter between them, and the side margins (horizontal margins):

{% embed url="https://drive.google.com/file/d/1-g4gAW2U0tfFViVaALIsWRmw50I-sPK7/view?usp=sharing" %}
Video tutorial on how to add a layout grid in Setka Content Design System Manager&#x20;
{% endembed %}

## How to disable a Layout Grid

To disable the grid, click on the arrow, and select **Disable**. It will remove the chosen grid from the Layout Grid section, but posts that use this Layout Grid will not lose their appearance.

**Delete this layout grid** option will remove it altogether.

You cannot delete all layout grids — as at least one layout grid is required for any post.

![Disable the Layout Grid in Setka Content Design System Manager](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQoKLYy1mGQWssR2n47%2F-MQoMC70eZNLjA1_LQTd%2FDisable-Layout-Grid-Setka-Content-Design-System-Manager.png?alt=media\&token=b9f3e186-d8f3-4f07-94a7-452f7de221c8)

## How to edit a Layout Grid

All settings of the Layout Grid, except the number of columns, can be changed.

![The Edit Layout Grid button in Setka Content Design System Manager](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQoKLYy1mGQWssR2n47%2F-MQoM4Phk2KhKQdzBYvy%2FEdit-Layout-Grid-Setka-Content-Design-System-Manager.png?alt=media\&token=a35737f4-f56e-4480-bf42-68e09d3d8e50)

You can't change the number of columns — otherwise, posts using this Layout Grid will be losing their appearance.

Press the **Advanced** spoiler to switch your Layout Grid between **Auto** and **Limited**. You can also edit Horizontal margins and Content width limit (only for **Limited** Layout Grid).

![Advanced spoiler in Layout Grid settings section of Setka Content Design System Manager](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQr7yEuNkuzNLLAhzjP%2F-MQr6uYAaGQFVCcO2pN3%2FAdvanced-spoiler-Layout-Grid-Setka-Cloud.png?alt=media\&token=ab3a5164-1fcb-431b-9abf-68ef1bd2f085)

Changes made will automatically apply to all posts that use this Layout Grid.

## Auto and Limited content width

You are prompted to select either Auto or Limited widths when adding a new layout Grid. This option is located under the **Advanced** spoiler.

**Auto** width fits 100% of your content container. The margin width remains constant; container size stays unchanged on window resize.

**Limited** width lets you set an exact maximum content width limit in pixels. Margins are fluid and fill all the available space between the container and post content's width, which keeps content in the center. Select a Limited Layout Grid when your images are overhanging the post width.

{% embed url="https://drive.google.com/file/d/1-g2us3galfTEBqLTaPyjgtEeKRmsV7ah/view?usp=sharing" %}
Video tutorial on how to add a layout grid in Setka Content Design System Manager
{% endembed %}
