Flex grid section
The Flex grid section of Combine builds a collage of media cards and text cards on a 12-column grid, with theme blocks inside.
Applies to: Combine 4.2.0 and later. Added in: Combine 3.1.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Flex grid section builds a collage of cards on a 12-column grid: media cards that show only an image or a video, and text cards with theme blocks over their own media. Each card chooses how many columns and rows it spans.
Where to find it: in the theme editor, select Add section and choose Flex grid, Media collage or Text cards collage. The three are the same section with different starting cards.
Layout
- On screens 768 px and wider the grid has 12 columns; on smaller screens it has 2.
- Desktop card height (minimum) sets the height of one grid row, from 1 to 10 (default 3). At 3, one row is as tall as two of the 12 columns are wide, so a card 2 columns wide and 1 row high is square. Each step up adds a quarter of that height.
- Mobile card height (minimum) does the same on the 2-column mobile grid. At 3, a card 1 column wide and 1 row high is square.
- Cards grow taller when their content needs more space, so the heights are minimums.
- Fullwidth stretches the grid to the edges of the screen. Without it, the grid keeps the page width.
Text style
- Text spacing sets the gap between the blocks of a text card, from -12 to 60 px (default 12 px).
- Text padding sets the space between the edge of a text card and its blocks: Small, Regular (the default) or Large.
Custom card design
- Remove gap between cards puts the cards edge to edge, for a single wall of images.
- Border radius rounds the corners of the cards, 0 to 30 px. It shows only when the cards have a gap.
The section heading, background colors, margins and heading tag work as described in General section styling. Flex grid has all three margin settings and offers H1 to H6, p and span as Heading tag.
Grid design: the size of each card
Each card has its own Grid design settings:
- Desktop columns sets how many of the 12 columns the card spans, from 2 to 12. Text cards start at 4, media cards at 2.
- Desktop rows sets how many rows it spans, from 1 to 4.
- Mobile columns and Mobile rows set the same on the 2-column mobile grid: 1 column or 2 columns, 1 row or 2 rows.
- Hide element on mobile hides the card on screens narrower than 768 px.
A row of the desktop grid is full when the cards' Desktop columns add up to 12. For example, one text card at 6 and two media cards at 3 fill one row.
Media card
A media card shows an image or a video with no text on it. It holds no blocks.
- Image is the card's picture. It fills the card and is cropped to its shape.
- Video file plays muted in a loop instead of the image. The image shows while the video loads and when it cannot play.
- Use different media on mobile shows Mobile video file on small screens, with its own Mobile video aspect ratio.
- Link makes the card clickable. Open link in a new window appears once a link is set.
Text card
A text card shows theme blocks over its own image or video. Select Add block inside the text card to add a Heading, Text, Button or any other theme block. A new text card holds a Caption and a Heading.
- Image and Video file are the media behind the text, with the same mobile options as the media card. Leave them empty for a plain color card.
- Link makes the whole card clickable. The buttons and links inside the card then stop working.
- Text alignment places the blocks in one of nine positions, from Left top to Right bottom (default Left bottom).
- Text container width limits how wide the blocks can get on screens 640 px and wider: Medium (60 percent of the card) or Large (90 percent, the default).
- Overlay under Custom card design is the color over the media, or the card color when there is no media. The default is a light gray at about one third opacity.
- Text under Custom card design sets the color of the blocks.
How do I show one card per row on mobile?
Set Mobile columns to 2 columns on each card. The mobile grid has 2 columns, and every card starts at 1 column, so by default two cards share a row on phones. A card at 2 columns takes the whole width. The cards follow their order in the sidebar, from left to right.
Why is my grid taller than the card height I set?
Because the card heights are minimums. A text card grows when its blocks need more space than its rows give, and the other cards in that row grow with it. Lower Text spacing or Text padding, shorten the text, or give the card one more row.
Why do the buttons in my text card not work?
Because the text card has a Link. A card link covers the whole card, so the links inside it cannot be selected. Remove the card's Link to use buttons.
All Flex grid settings
Every setting of this page, with its type and default.
Accepts these blocks: Text card and Media card.
Flex grid section: Section heading
Where to find it: Flex grid → Section heading
The Flex grid section uses the standard Section heading settings, listed in General section styling.
Heading (text field, default: "Promotion cards"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (text field, default: "Share your best offers"): Sets a short line next to or under the heading, in smaller, lighter text.
Heading size (dropdown, default: Regular): Sets the size of the section heading, in the Section titles font of Theme settings → Typography. Options: Regular, Large.
Text alignment (dropdown, default: One row: Left): One row: Left puts the heading and subheading side by side with the button on the right; Two rows puts the subheading under the heading; Center centers everything. Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Subheading (text field, default: "Share your best offers"): Sets a short line next to or under the heading, in smaller, lighter text.
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. At 3, a card 2 columns wide and 1 row high is square; each step adds a quarter of that height.
Cards will automatically expand if content requires more space.
Mobile card height (minimum) (slider 1 to 10, default: 3): Sets the minimum row height on the 2-column mobile grid. At 3, a card 1 column wide and 1 row high is square.
Fullwidth (checkbox, default: off): Stretches the grid to the edges of the screen.
Flex grid section: Text style
Where to find it: Flex grid → Text style
Text spacing (slider -12 to 60 px, default: 12 px): Sets the gap between the blocks of each text card.
Text padding (dropdown, default: Regular): Sets the space between the edge of a text card and its blocks. Options: Small, Regular, Large.
Flex grid section: Custom card design
Where to find it: Flex grid → Custom card design
Remove gap between cards (checkbox, default: off): Puts the cards edge to edge, with no space between them.
Border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the cards. Shown only when Remove gap between cards is off.
Flex grid section: Section design
Where to find it: Flex grid → Section design
The Flex grid section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent): Fills the whole section, edge to edge. Leave it transparent to use the body background.
Background gradient (gradient): Fills the section with a gradient instead of the background color.
Heading text color (color, default: transparent): Sets the color of the section heading, the subheading, the mobile button and the slider arrows.
Flex grid section: Gutter
Where to find it: Flex grid → Gutter
The Flex grid section uses the standard Gutter settings, listed in General section styling.
Decrease top margin (checkbox, default: off): Makes the space above the section smaller: at most 70 px on desktop, 40 px on mobile.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it.
Remove bottom margin (checkbox, default: off): Pulls the next section up, so the two sections touch.
These settings differ from the standard ones or exist only here:
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it.
Flex grid section: SEO
Where to find it: Flex grid → SEO
The Flex grid section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML level of the section heading for search engines; p and span give it no level. It does not change the size. Options: H1, H2, H3, H4, H5, H6, p, span.
Where to find it: Flex grid → Media card.
Image (image): Sets the card image. It fills the card and is cropped to its shape.
Video file (video): Plays a muted, looping video instead of the image. The image shows while the video loads and when it cannot play.
Use different media on mobile (checkbox, default: off): Shows a different video on screens narrower than 768 px. Shown only when Video file is set.
Mobile video file (video). Shown only when Use different media on mobile is on and Video file is set.
Mobile video aspect ratio (dropdown, default: Natural): Sets the shape of the mobile video. Natural keeps the video's own proportions. Options: Natural, Wide (16:9), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3), Tallest (9:16). Shown only when Use different media on mobile is on and Mobile video file is set and Video file is set.
Link (link): Makes the card a link.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Media card: Grid design
Where to find it: Flex grid → Media card → Grid design
Desktop columns (slider 2 to 12, default: 2): Sets how many of the 12 grid columns the card spans on screens 768 px and wider.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows the card spans on screens 768 px and wider.
Hide element on mobile (checkbox, default: off): Hides the card on screens narrower than 768 px.
Mobile columns (dropdown, default: 1 column): Sets how many of the 2 mobile grid columns the card spans. Options: 1 column, 2 columns. Shown only when Hide element on mobile is off.
Mobile rows (dropdown, default: 1 row): Sets how many mobile grid rows the card spans. Options: 1 row, 2 rows. Shown only when Hide element on mobile is off.
Where to find it: Flex grid → Text card.
Accepts these blocks: app blocks and any theme block.
Image (image): Sets the image behind the card's blocks. Leave it empty for a plain color card.
Video file (video): Plays a muted, looping video instead of the image. The image shows while the video loads and when it cannot play.
Use different media on mobile (checkbox, default: off): Shows a different video on screens narrower than 768 px. Shown only when Video file is set.
Mobile video file (video). Shown only when Use different media on mobile is on and Video file is set.
Mobile video aspect ratio (dropdown, default: Natural): Sets the shape of the mobile video. Natural keeps the video's own proportions. Options: Natural, Wide (16:9), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3), Tallest (9:16). Shown only when Use different media on mobile is on and Mobile video file is set and Video file is set.
Link (link): Makes the whole card a link. The buttons and links inside the card then stop working.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Text card: Text style
Where to find it: Flex grid → Text card → Text style
Text alignment (dropdown, default: Left bottom): Places the card's blocks in one of nine positions. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Text container width (dropdown, default: Large): Limits the width of the blocks on screens 640 px and wider: Medium 60 percent of the card, Large 90. Options: Medium, Large.
Text card: Grid design
Where to find it: Flex grid → Text card → Grid design
Desktop columns (slider 2 to 12, default: 4): Sets how many of the 12 grid columns the card spans on screens 768 px and wider.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows the card spans on screens 768 px and wider.
Hide element on mobile (checkbox, default: off): Hides the card on screens narrower than 768 px.
Mobile columns (dropdown, default: 1 column): Sets how many of the 2 mobile grid columns the card spans. Options: 1 column, 2 columns. Shown only when Hide element on mobile is off.
Mobile rows (dropdown, default: 1 row): Sets how many mobile grid rows the card spans. Options: 1 row, 2 rows. Shown only when Hide element on mobile is off.
Text card: Custom card design
Where to find it: Flex grid → Text card → Custom card design
Overlay (color with transparency, default: #F2F2F258): Sets the color over the media, or the card color when there is no media. Use a color with transparency over images.
Text (color, default: transparent): Sets the color of the card's blocks.
Related pages
- Flex sections: how flex sections, cards and theme blocks fit together.
- Flex cards section: promotion cards with media on top.
- Theme blocks: the blocks you add inside a text card.
- General section styling: the standard section settings.