> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/blogstudio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/blogstudio/customize-the-app/format-content-with-the-grid-editor.md).

# Format content with the Grid Editor

The Grid Editor is a great tool for adding rows and columns to the content on your article. Continue reading this article to learn more on how to use this tool.

**Note**: This feature only shows after saving the article and refreshing the dashboard. It is recommended to create and save your article first.

### Open the Grid Editor

1\. Starting from the Article Editor, click on a content block.

2\. Click the **Grid icon** on the right side.

<figure><img src="/files/42s7zVtr8TT7FB2IKmW7" alt=""><figcaption></figcaption></figure>

3\. While the Grid Editor is open, you can click on other content on the page to adjust it.

### Features

This section will go over each feature of the Grid Editor.

**Row**

In the Row section, going from left to right and top to bottom:

* **+ icon**: Add a new content block under the existing content.
* **Duplicate icon**: Duplicate the content block under the original one.
* **↑ icon**: Move position of content block up.
* **↓ icon**: Move position of content block down.
* **< > icon**: Reveal HTML of content block.
* **x icon**: Delete content block.

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

**Column**

In the Column section, going from left to right and top to bottom:

* **+ icon**: Add a new content block to the left or right of the existing content.
* **Duplicate icon**: Duplicate content block to the right of the existing content.
* **↑ icon**: Move position of content block up.
* **↓ icon**: Move position of content block down.
* **← icon**: Move position of content block to the right.
* **→ icon**: Move position of content block to the left.
* **Increase icon**: Increase width of content block.
* **Decrease icon**: Decrease width of content block.
* **< > icon**: Reveal HTML of content block.
* **Outline icon**: Shows guidelines of columns. This does not display on the live view.

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