Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the Grid Summary Block

The Grid Summary Block is one of four Summary Block designs. It presents your content (blog posts, products, gallery images, or events) in an even grid.

This is a popular option if you want to manually recreate the built-in grid designs on some of our templates like Flatiron and Avenue.

Note: If adjacent items are different in length, there will be extra space between them.

Step 1 - Add the Grid Summary Block

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Under Summary, select Grid from the menu.
  4. For more detailed steps, visit Adding blocks.

Step 2 - Select your content

In the Block Editor that appears, select the Blog, Gallery, Events, or Products Page to feature in the block. In this example, we'll use a Blog Page.

  • Album Pages aren't supported at this time.
  • You can only feature content from one page in the Summary Block. However, you can add multiple blocks to a page to feature all of the content you want.

To learn more, visit Summary Blocks overview.

Tip: For connected Gallery Pages, images open in a lightbox slideshow. Clickthrough URLs disable the lightbox.

Step 3 - Edit the layout

Click the Layout tab to customize the layout options of the block. Here, you can change the size of and space between items.

The preview of the block on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.

Here are the design options:

Text Size Depending the emphasis you want to place on text (versus images), choose from Extra Large, Large, Medium, and Small. These settings affect the title. The Extra Large setting also affects excerpt text.
Aspect Ratio Select the aspect ratio for the thumbnail image, which affects cropping. Select Auto to display thumbnails without cropping.
Column Width Use the slider to adjust the width between columns formed in the block.
Gutter Width Specify the space/padding between items. 
Text Alignment Align the text to the left or right, or center.
Metadata Position Select the location of the item metadata, like publication date or categories. Choose between Above Title, Below Title, and Below Content
Tip: Learn how your template styles the captions.

Step 4 - Filter what displays

Click the Display tab to select the information that displays in the block and filter content by specific criteria. For example, you can select to show or hide item titles, blog post authors, or filter items by a tag or category.

To learn more, visit Summary Blocks overview. It includes descriptions of each option in the tab.

Step 5 - Save

When you’re done designing the block, click Apply.

Step 6 - Switch between designs

Switch the design to a different block in the Design tab of the Block Editor. This way, you change the design and behavior of the content without deleting and re-adding the block.

To learn more, visit Summary Blocks overview.

Step 7 - Switch between content sources

Change the content that appears in the block in the Content tab.

To learn more, visit Summary Blocks overview.

Sample

Here's a sample Grid Summary Block:

Was this article helpful?
11 out of 30 found this helpful
Using the Grid Summary Block