A Grid section shows multiple blocks of content that each share the same layout, maintaining a consistent style within the section and ensuring that elements align across multiple blocks.

A Grid section is similar to a table in that it contains columns and rows of cells that can each hold content. In a table the height of each cell is defined by its content and the content of other cells in the same row.

The same is true in a Grid section, however the 'columns' are separated into individual 'cards':

The default Grid section features a heading followed by a row of three cards (or a single column of three cards on tall/portrait screens). Each card contains an image, text, and a button, and those elements are contained within cells whose size and location are matched in each card. The number of cards, their cells, cell content, colours, and other styles can all be changed.

The section includes optional blocks for 'header' content above the grid of cards, and 'footer' content below the grid. The default blocks include some placeholder text that reads "Add text here" that won't display in the published story. To display content in either or both of these blocks, click the placeholder text and enter something new. An 'insert' menu that appears as three dots above and below the blocks allows for inserting text, dividers, spacers and buttons above and below other content in the blocks. Options also enable changing the font and alignment text in the box, adjusting its width, etc.

To add a new card to the section, replicate an existing card. This can be done through a menu at the top of each card with an item labelled 'Duplicate card', or by the green + button to the side of any card:

​

​

To delete a card, use the menu at the top of a card and choose 'Delete card'.

Cards can have multiple cells, each with its own type of content: text, image, video, button, divider, spacer, etc. Each card can also have a background image that fills the full shape of the card, appearing "behind" the content in cells.

To add, change, or delete the background image on a card, use the menu at the top of a card and choose from the options to edit or delete:

To change existing text in a card, mouse over it to access menus to change its style, font, alignment, etc, or click on the text to type or paste in new text.

To change an existing image or video in a card, mouse over it to access a menu to replace it and/or change its size or style, including giving it animation effects or rounded corners, or to delete it.

To add a new type of content into an existing cell, first delete its content (if there is any), then use the three-dot menu at the top of the cell and choose from any of the shown content types to add:

On the left side of each cell in a card is a 3-dot menu that enables moving, duplicating, adding, and deleting rows in cards. Performing any of these actions will affect all the cells in the same virtual 'row' across all the cards in the section (eg, the first cell in every card or the third cell in every card). When a new cell is added to a card, a new cell is added to all the cards, and by default the new cell is ready for you to add text, or any other element:

Alternatively, you can add a row by choosing the 3-dot menu below any existing cell and choosing the type of content to add. Doing so will add the same type of content to all the cards in the section. The individual elements can then be styled independently or removed:

Click a 3-dot menu to the left of any cell and drag up or down to shift the whole corresponding row up or down in the Grid. Click the 3-dot menu at the top of any card and drag left or right to shift the card's position:

The number of cards that fit across a reader's screen depends on their screen size and resolution. While four or five cards might easily fit in a row on a desktop or laptop screen, if they contain text they might be too small to read on a phone if there were still five to a row. By default, the layout is responsive. As more cards are added to the section, if they won't comfortably all fit on one row, they will instead drop to a new row:

The section options panel enables you to change how the responsive layout adjusts the section at different screen sizes. There's two key options:

Setting a maximum number of cards per row enables you to ensure that, for instance, no more than five cards display in a row, but that if your reader's screen doesn't comfortably fit five cards, it may display less than five per row. Although you have set five as a maximium, the number that a reader of your story sees in a row will still depend on their screen size. As such, it's important to test your story at multiple screen widths to see how the section responds.

For a more precise layout, set a defined number of cards per row at different screen sizes. This option allows you to specify, for instance, that on wide desktop screens four cards will display per row, while two display per row on tablet, and only one per row on mobile:

The numbers you specify per screen size are up to you. If the cards in the section only contain images or names, then ten per row on desktop might be appropriate and five per row on mobile perfectly readable. An exact number of cards per row is also useful if your content looks neater when divided into rows of an equal number of cards at any screen size, or really only works with a specific number per row at all screen sizes, such as in this example grid where three cards per row is the only option that suits the content:

It's possible to make a grid with different numbers of items per row, as per the image below. To do so, create a new Grid section per row. For each of the sections, use the Section Options to adjust the number of items per row and the section's overall top and/or bottom padding such that the sections appear close together.

Clicking the cog button in the top-left of the section or next to the section thumbnail in the left of the editor will open the SECTION OPTIONS panel through which the section can be highly customised:

​

There are a wide range of pre-styled Grid sections to choose from when you add a new section to your story. Look for them among the cetegories in the section chooser.

If you create a Grid section you think will be useful to re-use in other stories, save it as a personal template (or if you are a team leader, save it as a workspace template to make it available to the rest of your team).

​

There are no feature-specific accessibility requirements for this section. Please follow our accessibility guidelines to ensure your grids are inclusive for all.

​