Flex grid section

The Flex grid section builds a collage of text and media cards that each span columns and rows of a 12-column grid in Kingdom.

Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 6.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.

The Flex grid section builds a collage of cards on a 12-column grid. Each card spans the columns and rows you set, on desktop and on mobile, and is either a Media card (an image or a video) or a Text card (theme blocks over an optional image or video). Kingdom 6.0.0 added it.

Where to find it: select Add section in the theme editor, then choose one of the four Flex grid presets: Fullwidth media with text, Flex grid or Text cards collage (Add section category Storytelling), or Media collage (category Media & galleries).

The four presets

The four presets are the same Flex grid section with different starting cards. After you add one, you can change every card or add more.

Preset	Starts with
Fullwidth media with text	One Text card across all 12 columns, with a caption, a heading and a button centered on it. Add an image or video to the card for a banner.
Flex grid	Three Media cards and two Text cards in a mixed collage, with a "Flex grid" heading.
Media collage	One black Text card 4 columns wide and 2 rows tall with a button, next to four Media cards of 5 and 3 columns.
Text cards collage	A light grey Text card with stars, a heading and a button, a large Media card 6 columns wide and 3 rows tall, and four smaller Text cards with an image, a heading and a text.

Setting up the grid

On screens wider than 768 px the grid has 12 columns; on smaller screens it has 2. The cards fill it in their order in the section, from left to right and top to bottom.

Add a preset

In the theme editor, select Add section and choose Media collage (or another Flex grid preset).

Set the desktop size of each card

Select each card and set Desktop columns (2 to 12) and Desktop rows (1 to 4). Plan the cards so that each row of the grid adds up to 12 columns.

Set the mobile size

Set Mobile columns (1 or 2) and Mobile rows (1 or 2) for each card, or turn on Hide on mobile to leave it out on phones. Check the mobile preview.

Add media and content

Add an Image or a Video file to each card. In Text cards, select Add block to add a heading, a text, a button and other theme blocks.

Adjust the row height

Select the section and change Desktop card height (minimum) and Mobile card height (minimum) until the cards have the shape you want.

To add cards, select Add block in the section and choose Media card or Text card. See Media card and Text card for their own settings.

Card height and spacing

Desktop card height (minimum) sets the height of one grid row, 1 to 10 (default 3). At 3, a card 2 columns wide and 1 row tall is square. Each step up or down adds or removes a quarter of that height.
Mobile card height (minimum) does the same on screens 768 px wide or less (default 3). At 3, a card 1 column wide and 1 row tall is square.
Cards grow taller when their blocks need more space than the row height gives them.
Gap between cards sets the space between the cards: None, Small (Theme settings → Layout → Columns margin) or Large (Theme settings → Layout → Horizontal padding).
Hide border removes the thin border around each card.
Text padding sets the space between the edge of a Text card and its blocks, from None to Extra large.
Text spacing sets the space between the blocks inside a Text card, from Small to Extra large.
Heading shows a title above the grid; leave it empty for none. Heading tag sets its HTML tag, see General section settings.

Why is my card taller than the others?

Because its blocks need more space than the row height gives them. A card grows to fit its content, and the cards in the same grid row grow with it. Remove a block, choose a smaller Text padding, or raise Desktop card height (minimum) so every row has room.

Why is there an empty space in my grid?

Because a card does not fit in what is left of a row. The grid moves the card to the next row and leaves the space empty. Change Desktop columns or the order of the cards so each row adds up to 12 columns, and check the same on mobile, where each row has 2 columns.

Can I make the whole collage clickable?

Card by card. A Media card and a Text card each have a Link that makes the whole card clickable. In a Text card, a card link stops the buttons and links inside it from working, so use one or the other.

All Flex grid settings

Every setting in this group, with its type and default.

Media card: an image or video card in the grid.
Text card: theme blocks over an optional image or video.
Flex cards section: promotion cards in rows, with media on top.
Blocks: the theme blocks you add inside a Text card.