> 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="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2FT23B1qfSNtyHVG5eHv1S%2Fselect-grid-icon.png?alt=media&amp;token=40de80ff-338f-41ad-a6cf-e3481e6bfe67" 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="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2F6I3aLMNrIQBGOSLbRGbt%2Fgrid-row.png?alt=media&amp;token=0adfec25-b2e6-4932-9a39-cf2e4cbab079" 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="https://1857315123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsA16nlP6q2CISJmAAc1i%2Fuploads%2FoR5YcQTjkMBvf2Horw68%2Fgrid-column.png?alt=media&amp;token=5c9de3ff-f72a-4c10-b844-5d21d28648da" alt=""><figcaption></figcaption></figure>