The Flex Grid paragraph type is designed to help you build custom layouts by adding "Grid Items." These items act as containers for other content components, allowing you to mix and match things like text, videos, images, and statistics within a single horizontal section.
Adaptive Column Logic
The grid automatically calculates the width of your items to create a balanced row. However, there are specific rules for how these columns behave:
- 1 Item: Spans the full width of the page.
- 2 Items: Creates a 50/50 split (two columns).
- 3 Items: Creates a 33/33/33 split (three columns).
- 4 or More Items: The grid will always default to a 3-column maximum.
[!TIP] Layout Strategy: If you have 4 items, the platform will wrap the 4th item to a new row, which can sometimes look unbalanced. As shown in the "Flex Grid Example 2" screenshot, if you want a clean, symmetrical look for 4 or more items, it is often better to create two separate Flex Grid paragraphs with two items each.
Flexible Content Types
Each "Grid Item" within the Flex Grid can hold a different type of content. This allows for high-impact visual sections where you can place a Call to Action (with a button and border) next to a YouTube Video, or a Statistic next to a Media Aside.
How to Build a Flex Grid
- Add the Flex Grid paragraph to your page.
- Provide an optional Headline to title the entire section.
- Click Add new grid item.
- Inside the grid item, use the dropdown to choose your component (e.g., Call to Action, Media, Statistic, or Pullquote).
- Complete the fields for that component and save the item.
- Repeat the process for your second or third items.
- Review your layout: If you reach 4 items and the alignment looks off, consider moving items 3 and 4 into a second Flex Grid paragraph below the first one.
