The Fluid Grid Block Editor allows you to create custom block layouts tailored to your specific requirements. If you cannot find a suitable layout in our standard blocks library, use this tool to define a precise number of cells and specify different stacking orders for desktop and mobile views.
More details about fluid grid blocks settings and how to add them can be found here: https://d.pr/PXkXWJ.
Understanding the Grid System
The system is built on a CSS Grid layout, which provides a structured framework of columns and rows. Within this grid, you create Containers—dedicated areas for holding Instapage widgets. You can configure how these containers stack and appear separately for desktop and mobile devices to ensure an optimized responsive design.
Accessing the Editor
There are two ways to access the Fluid Grid Block Editor:
-
Option A: Create a New Block
Insert a new block into your page.
Select Fluid Grid Block and choose Custom Grid.
-
Option B: Edit an Existing Block
Click on an existing Grid Block in your layout.
Click the three dots that represent the “More” button.
Select Edit Block Layout.
Creating a Layout from Scratch
When you start a new custom grid, you will begin with a default 3x3 layout. Use the panel on the right to adjust the number of rows and columns. This grid serves as your canvas for adding Containers. Click on any cell of the grid to create the first container. You can also drag-click to create a container that spans multiple cells.
Key container features include:
Spanning: Containers can span across multiple cells both horizontally and vertically.
Responsiveness: You can define a unique layout for mobile views that differs from the desktop configuration.
Editing Your Layout
Moving Containers
You can drag and drop containers to reposition them. If a container does not fit in the target area, resize it to be smaller before moving it. Once repositioned, you can expand it as needed.
You can click the arrows in the bottom-right corner and drag them to make the container span across multiple cells.
Managing Rows and Columns
Add or remove rows and columns using the "+" and "-" icons located on the grid edges. Note that a row or column must be empty in both desktop and mobile views before it can be deleted. If a row/column is populated in one of the views, the delete icon will be disabled.
Optimizing the Mobile View
The mobile view can be adjusted independently. You can rearrange container order, change their sizes, or hide them entirely to create a mobile-specific experience. You can switch between desktop and mobile by using the toggle on the upper right side in the editing section.
Pro Tip: Grid Sizing for Consistency
To ensure alignment across views, use a grid size that is a common denominator for your intended layouts. For example, to have 3 equal columns on desktop and 2 on mobile, create a 6-column grid. This allows you to span containers across 2 columns on desktop and 3 columns on mobile for perfect symmetry.
Deleting and Hiding Containers
Deleting Containers
To delete a container, you can click on the X icon in the top right corner of the container or on the same icon from the menu on the right. Deleting a container leaves a blank space on the grid, which can be used for new containers or to extend existing ones.
Hiding Containers
Use the Hide eye icon in the right panel to remove a container from view without deleting it. You can click on the same icon to unhide it.