Flex grid section
The Flex grid section arranges media cards and text cards in a free grid in Highlight; four presets start it as a collage or a fullwidth banner.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 4.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.
The Flex grid section places media cards and text cards in a grid of 12 columns, where each card spans the columns and rows you choose. Use it for collages, banners with text over an image, or a grid of features.
Where to find it: Online Store → Themes → Customize → Add section → one of the four Flex grid presets: Fullwidth media with text, Flex grid, Text cards collage (Storytelling category) or Media collage (Media & galleries category).
The section holds two kinds of cards:
- Media card: an image or video, with an optional link. See Media card.
- Text card: your own theme blocks over an optional image, video or background color. See Text card.
The four presets
All four add the same Flex grid section; they differ only in the cards they start with.
- Fullwidth media with text: one Text card across all 12 columns, with a caption, a heading and a button centered over the media, and a tall card height (10). A banner.
- Flex grid: two Media cards and two Text cards of different sizes, plus a large Media card two rows tall.
- Media collage: a black Text card with a caption and a button, next to four Media cards of 5 and 3 columns.
- Text cards collage: light gray Text cards with a star rating, headings, small images and text, around one large Media card three rows tall.
Layout
- Desktop card height (minimum) sets the height of one grid row on desktop, 1 to 10. At 3 (the default), a row is as tall as two columns are wide, so a card of 2 columns and 1 row is square.
- Mobile card height (minimum) does the same on phones, where the grid has 2 columns. At 3, a card of 1 column and 1 row is square.
- Cards grow when their content needs more room, and all rows of the grid have the same height.
- Grid gap size sets the space between cards, as a percentage of one grid column. Default: 25 %.
- Hide border removes the thin border around every card.
Typography
These settings apply to the blocks inside the Text cards.
- Text padding sets the space between the card's edge and its blocks: None, Small, Regular or Large.
- Text spacing sets the space between the blocks: Small, Medium, Large or Extra large.
Building a flex grid
Add a preset
In the theme editor, select Add section and choose the Flex grid preset closest to the layout you want.
Add Media cards and Text cards
Select Add block in the section and choose Media card or Text card. Remove the cards you do not need and drag the others into order.
Give each card its size
Select a card and set Desktop columns (2 to 12) and Desktop rows (1 to 4). The columns of the cards in one row should add up to 12, for example 8 and 4.
Set the mobile layout
Set each card's Mobile columns (1 or 2) and Mobile rows (1 or 2), or turn on Hide on mobile. Switch the editor preview to mobile to check.
Add the content
Upload the media of each card. In a Text card, select Add block and add a Heading, Text and Button.
Set the height
Adjust Desktop card height (minimum) and Mobile card height (minimum) until the cards have the shape you want.
Why does a card get taller than the card height?
Because its content needs more room. Desktop card height (minimum) and Mobile card height (minimum) are minimums: a Text card with a lot of text grows, and the other cards of the grid grow with it, since all rows share one height. Shorten the text, lower Text padding or give the card more columns.
Why do links inside a text card not work?
The Text card has a Link of its own. When it is set, the whole card is one link and the buttons and links inside it do not work. Clear the card's Link to use the buttons inside it.
All Flex grid settings
Every setting, with its type and default.
Accepts these blocks: Text card and Media card.
Heading (text field, default: "Promotion cards").
Flex grid section: Layout
Where to find it: Flex grid → Layout
Desktop card height (minimum) (slider 1 to 10, default: 3): Sets the minimum height of one grid row on desktop. At 3, a row is as tall as two of the 12 columns are wide; each step adds or removes a quarter of that.
Cards will automatically expand if content requires more space.
Mobile card height (minimum) (slider 1 to 10, default: 3): Sets the minimum height of one grid row on phones, where the grid has 2 columns. At 3, a row is as tall as one column is wide.
Grid gap size (slider 0 to 100 %, step 5, default: 25 %): Sets the space between cards, as a percentage of the width of one grid column.
Hide border (checkbox, default: off): Removes the border around every card. The cards' Border color setting is hidden while this is on.
Flex grid section: Typography
Where to find it: Flex grid → Typography
Text padding (dropdown, default: Small): Sets the space between the edge of each Text card and its blocks. Options: None, Small, Regular, Large.
Text spacing (dropdown, default: Medium): Sets the vertical space between the blocks inside each Text card. Options: Small, Medium, Large, Extra large.
Flex grid section: SEO
Where to find it: Flex grid → SEO
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Related pages
- Media card: the image or video card.
- Text card: the card that holds blocks.
- Blocks: the theme blocks a Text card holds.
- Flex cards section: a row of cards with media on top and text below.