Flex grid section
The Flex grid section of Borders builds editorial grids from text cards and media cards that span columns and rows.
Applies to: Borders 3.1.0 and later. Added in: Borders 2.1.0. Last checked: 2026-10-13 against Borders 3.1.0.
The Flex grid section builds an editorial grid from cards of different sizes: Text cards and Media cards (image or video). Each card sets how many columns and rows it spans, so you can mix one large picture with several small text boxes.
Where to find it: Online Store → Themes → Customize → Add section → Flex grid
Layout
- On desktop (767 px and wider) the grid has 12 columns. On mobile it has 2 columns.
- Desktop card height (minimum) (1 to 10, default 3) sets the minimum height of one grid row, relative to the screen width. At 3, a card 2 columns wide and 1 row high is square.
- Mobile card height (minimum) does the same on mobile.
- Cards grow taller when their content needs more room.
- Heading, Heading tag and Hide heading border set the optional section heading. Color scheme, Hide section bottom border and Hide borders (the lines between the cards) set the section design.
The section is hidden on the storefront when it has no cards.
Text card
A Text card holds theme blocks: Text, Button, Badge, Content group, Custom Liquid, Empty space and app blocks.
- Grid design: Desktop columns (2 to 12) and Desktop rows (1 to 4) set the card's size on desktop. Mobile columns and Mobile rows (1 or 2) set it on mobile. Hide on mobile devices removes the card on mobile.
- Typography: Text alignment places the content in one of nine positions, from left top to right bottom. Text spacing sets the space between the blocks. Text content padding and Text container width set the room around and the width of the text.
- Inner content design: Color scheme, Hide borders, Remove border radius and Remove inner padding & border radius.
Media card
A Media card shows an image or a video that fills the card, with optional blocks over it. It has the same Grid design and Typography settings as the Text card, and Color scheme, Remove border radius and Remove inner padding & border radius, plus:
- Image, or Video for a muted, looping background video. The image is the fallback on mobile devices where autoplay is off.
- Media overlay and Overlay opacity (0 to 60 %) darken or tint the media so text on it stays readable.
- Media shape rounds one side or all corners. Add borders to media shows only when Media shape is None.
- Link makes the whole card a link, with Open link in a new window. The image zooms on hover, as set in Theme settings → Animations.
If the entire card has a link, the links of the blocks inside it do not work. Use either the card Link or a Button block, not both.
Setting up a flex grid
Add the section
Select Add section → Flex grid, and set Desktop card height (minimum) and Mobile card height (minimum).
Add a large media card
Select Add block → Media card. Choose an Image or Video, and set Desktop columns to 6 and Desktop rows to 2.
Add text cards beside it
Add two Text cards with Desktop columns 6 and Desktop rows 1. They stack beside the media card. Add Text and Button blocks inside them.
Fill each row to 12 columns
Check that the cards of each row add up to 12 columns on desktop, for example 6 + 6 or 4 + 4 + 4. A row that adds up to less leaves an empty space at its end.
Adjust mobile
Set Mobile columns and Mobile rows for each card (the mobile grid has 2 columns), or turn on Hide on mobile devices for cards that are not needed on phones.
Why is there an empty space in my grid?
The cards of a row do not add up to 12 columns on desktop, or 2 on mobile. Change the Desktop columns of the cards in that row, or add a card to fill the gap.
All Flex grid settings
Every setting on this page, one list per section or block, 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
Heading (text box, default: "Flex grid").
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Hide heading border (checkbox, default: off).
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, relative to the screen width. At 3, a card 2 columns wide and 1 row high is square. Cards grow when their content needs more room.
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 mobile, relative to the screen width.
Flex grid section: Section design
Where to find it: Flex grid → Section design
Color scheme (color scheme, default: scheme_1).
Hide section bottom border (checkbox, default: off).
Flex grid section: Inner content design
Where to find it: Flex grid → Inner content design
Hide borders (checkbox, default: off): Removes the lines between the cards.
Card hover effect (dropdown, default: None). Options: None, Accent color. Shown only when Theme settings → Animations → Card hover effect is Accent color.
Where to find it: Flex grid → Text card.
Accepts these blocks: app blocks and any theme block.
Text card: Grid design
Where to find it: Flex grid → Text card → Grid design
Desktop columns (slider 2 to 12, default: 2): Sets how many of the 12 desktop grid columns the card spans.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows the card spans on desktop.
Hide on mobile devices (checkbox, default: off): Removes the card on screens narrower than 767 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 on mobile devices is off.
Mobile rows (dropdown, default: 1 row): Sets how many grid rows the card spans on mobile. Options: 1 row, 2 rows. Shown only when Hide on mobile devices is off.
Text card: Typography
Where to find it: Flex grid → Text card → Typography
Text alignment (dropdown, default: Left bottom): Places the card's blocks in one of nine positions inside the card. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Text spacing (slider -12 to 60 px, default: 12 px): Sets the vertical space between the blocks inside the card, -12 to 60 px.
Text content padding (dropdown, default: Regular): Sets the padding around the card's blocks. Options: None, Default, Regular, Large.
Text container width (dropdown, default: Medium): Sets the maximum width of the text area, as a share of the card width. Options: Small, Medium, Large.
Text card: Inner content design
Where to find it: Flex grid → Text card → Inner content design
Color scheme (color scheme, default: scheme_1).
Hide borders (checkbox, default: off): Removes the borders of this card.
Remove border radius (checkbox, default: off): Makes the card corners square.
Remove inner padding & border radius (checkbox, default: off): Removes the card padding and its rounded corners.
Where to find it: Flex grid → Media card.
Accepts these blocks: app blocks and any theme block.
Image (image).
Video (video): Plays a muted, looping video that fills the card. The Image is the fallback on mobile devices where autoplay is off.
Media overlay (color, default: transparent): Tints the media with a color, so text over it stays readable.
Overlay opacity (slider 0 to 60 %, default: 30 %): Sets how strong the overlay color is, 0 to 60 percent.
Media shape (dropdown, default: None): Rounds one side or all corners of the media. Options: None, Top rounded, Right rounded, Bottom rounded, Left rounded, Fully rounded.
Add borders to media (checkbox, default: off): Borders will be added only when media shapes are not used. Shown only when Media shape is None.
Link (link): Makes the whole card a link. The links of the blocks inside the card then do not work.
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 desktop grid columns the card spans.
Desktop rows (slider 1 to 4, default: 1): Sets how many grid rows the card spans on desktop.
Hide on mobile devices (checkbox, default: off): Removes the card on screens narrower than 767 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 on mobile devices is off.
Mobile rows (dropdown, default: 1 row): Sets how many grid rows the card spans on mobile. Options: 1 row, 2 rows. Shown only when Hide on mobile devices is off.
Media card: Typography
Where to find it: Flex grid → Media card → Typography
Text alignment (dropdown, default: Left bottom): Places the card's blocks in one of nine positions inside the card. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Text spacing (slider -12 to 60 px, default: 12 px): Sets the vertical space between the blocks inside the card, -12 to 60 px.
Text content padding (dropdown, default: Regular): Sets the padding around the card's blocks. Options: None, Default, Regular, Large.
Text container width (dropdown, default: Medium): Sets the maximum width of the text area, as a share of the card width. Options: Small, Medium, Large.
Media card: Inner content design
Where to find it: Flex grid → Media card → Inner content design
Color scheme (color scheme, default: scheme_1).
Remove border radius (checkbox, default: off): Makes the card corners square.
Remove inner padding & border radius (checkbox, default: off): Removes the card padding and its rounded corners.
Related pages
- Flex columns section: equal columns of theme blocks.
- Borders blocks: the theme blocks you can put in a card.
- Recommended image sizes: image sizes for cards.
- Animations theme settings: the hover effect of linked images.