Flex grid section
The Flex grid section builds a grid of media cards and text cards that span columns and rows in Split, behind three presets including a media collage.
Applies to: Split 5.1.0 and later. Added in: Split 5.0.0. Last checked: 2026-10-13 against Split 5.1.0.
The Flex grid section builds a grid of cards that each span a number of columns and rows: Media card for an image or video, Text card for theme blocks over optional media. Use it for collages, promotion grids and full-width banners.
Where to find it: select Add section in the theme editor, then choose Fullwidth media with text, Flex grid or Media collage. The three presets add the same Flex grid section with different cards.
Presets
- Fullwidth media with text (Storytelling category): one Text card 12 columns wide with a Caption, a Heading, an Empty space and a Button, centered in the middle. Desktop card height (minimum) is 10, so the banner is tall. Add an image or video to the Text card to put it behind the text.
- Flex grid (Storytelling category): five cards over two rows. Row 1: a Media card 4 columns wide and 2 rows tall, then a Text card 8 columns wide. Row 2: two Media cards 2 columns wide and a Text card 4 columns wide.
- Media collage (Media & galleries category): a black Text card with white text, 4 columns wide and 2 rows tall (Caption "Our Media", Empty space, Button "EXPLORE"), then four Media cards: 5 + 3 columns in row 1 and 3 + 5 columns in row 2.
After adding a preset, you can add, remove and resize cards freely: the presets are only starting points.
Building a grid with columns and rows
The grid has 12 columns on screens 768 px and wider. Cards fill it left to right, row by row; a card that spans 2 rows also takes the place below it in the next row.
Add the cards
In the theme editor sidebar, select Add block under the Flex grid section and choose Media card or Text card. Drag the cards to change their order.
Set the columns
In each card, set Desktop columns (2 to 12). Make each row add up to 12, counting the cards of the row above that span 2 rows. For example 4 (2 rows tall) + 8 in row 1, then 2 + 2 + 4 next to the tall card in row 2.
Set the rows
Set Desktop rows (1 to 4) on the cards that should be taller than one row.
Set the row height
In the section, set Desktop card height (minimum) (1 to 10). It sets the height of one row for the whole grid.
Check the mobile layout
Preview the page on a phone and adjust Mobile columns and Mobile rows on each card, or turn on Hide on mobile.
Row height
Desktop card height (minimum) sets the height of one row, as a share of the screen width. At 3 (the default) one row is as tall as two columns are wide, so a card 2 columns wide and 1 row tall is square. Each step up or down adds or removes a quarter of that height.
- All rows of the section keep the same height.
- When the blocks of a Text card need more space than the row height, the card grows, and every row of the section grows with it.
- Mobile card height (minimum) does the same on phones and on tablets held upright. At 3, one row is as tall as one mobile column is wide.
Mobile layout
On screens narrower than 768 px the grid has 2 columns.
- Mobile columns: 1 column (half the screen width) or 2 columns (the full width). Two 1-column cards sit side by side.
- Mobile rows: 1 row or 2 rows.
- Hide on mobile hides the card on phones and on tablets held upright.
Text padding and spacing
- Text padding sets the space between the edge of a Text card and its blocks: Small, Regular or Large. On screens wider than 1024 px, Small is 40 px, Regular 80 px and Large 9 percent of the screen width.
- Text spacing sets the gap under each block: Small 7.5 px, Medium 15 px, Large 24 px, Extra large 30 px on screens wider than 480 px.
Why is there an empty gap in my grid?
Because the cards of a row add up to less than 12 columns, or a card does not fit in the columns left and moves to the next row. Count the columns per row, including cards from the row above that span 2 rows, and make each row add up to 12.
Why are all my grid rows taller than I set?
Because its blocks need more space than the row height. The card then grows, and all rows grow with it, since every row of the grid has the same height. Raise Desktop card height (minimum), shorten the text, or make the card wider.
All Flex grid settings
Every setting in this group, with its type and default.
Accepts these blocks: Text card and Media card.
Flex grid section: Layout
Where to find it: Flex grid → Layout
Desktop card height (minimum) (slider 1 to 10, default: 3): Sets the height of one grid row on screens 768 px and wider, as a share of the screen width. At 3, one 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 height of one grid row on phones and on tablets held upright. At 3, one row is as tall as one of the 2 mobile columns is wide; each step adds or removes a quarter of that.
Flex grid section: Typography
Where to find it: Flex grid → Typography
Text padding (dropdown, default: Small): Sets the padding around the blocks of every Text card. On screens wider than 1024 px: Small 40 px, Regular 80 px, Large 9 percent of the screen width. Options: Small, Regular, Large.
Text spacing (dropdown, default: Medium): Sets the gap under each block in the Text cards: 7.5, 15, 24 or 30 px on screens wider than 480 px, two thirds of that on smaller phones. Options: Small, Medium, Large, Extra large.
Related pages
- Media card: an image or video card with an optional link.
- Text card: a card with theme blocks over optional media.
- Theme blocks: the blocks you can add inside a Text card.
- Flex cards section: cards with media on top and blocks below, in one or more rows.