# Blog posts grid

### Section overview

The Blog posts grid section displays a customizable grid of blog articles from a selected blog. It allows merchants to showcase recent or featured blog content anywhere on their site.

#### Common use cases

* Highlighting recent blog posts on the homepage
* Creating a featured articles section on collection pages
* Showcasing related content on product pages
* Displaying news or company updates in a visually appealing grid format

#### Usage tips

* For optimal visual balance, use 3-4 articles in a desktop row
* Use the split layout option when you want to emphasize the section heading alongside the articles
* Consider mobile display carefully - fewer articles per row (1-2) work best on smaller screens
* Match the color scheme with your overall page design for a cohesive look
* Use the spacing controls to create visual separation from adjacent sections

### Section settings

| Setting              | Description                                                            |
| -------------------- | ---------------------------------------------------------------------- |
| Blog                 | Select which blog to pull articles from                                |
| Total items          | Set the number of articles to display in the grid                      |
| Heading              | Add a title for the article grid section                               |
| Content              | Add descriptive text to appear above the article grid                  |
| Button label         | Text to display on the optional button                                 |
| Button URL           | Destination link for the optional button                               |
| Top spacing          | Adjust the padding above the section (0-300px)                         |
| Bottom spacing       | Adjust the padding below the section (0-300px)                         |
| Color scheme         | Select the background and text color combination                       |
| Border color         | Choose between subtle or strong border colors                          |
| Button color         | Select the style and color theme for the button                        |
| Border position      | Choose where borders appear (none, top, bottom, or both)               |
| Columns desktop      | Set the number of article columns on desktop (1-8)                     |
| Columns mobile       | Set the number of article columns on mobile (1-3)                      |
| Horizontal alignment | Align the section content left, center, or right                       |
| Enable margin        | Toggle horizontal margin on or off                                     |
| Enable split         | Toggle split layout (header on left, grid on right)                    |
| Visibility           | Control section visibility (all devices, mobile only, or desktop only) |

### Block settings

This section does not contain any configurable blocks. Articles are rendered using the component\_\_blog-item snippet, which displays individual blog articles with a consistent design.