Fluid Grid Blocks are a new block type that uses customizable, container-based grids to create landing pages that automatically adapt and scale to any screen size. When adding a Fluid Grid Block, you can choose from a range of predefined grid options with varying rows, columns, and widths, allowing you to precisely organize and structure your content to meet your design needs across all devices.
Adding a Fluid Grid Block
To add a new Fluid Grid Block while editing your page, click on Insert Block and then click on My Blocks, then select Fluid Grid Block.
You can choose from different layout arrangements. The positions of the containers in the block relative to each other will be fixed, but each container will have individual arrangement settings.
After placing a Fluid Grid Block on a page, you can add the following elements to it:
- headlines
- paragraphs
- images
- buttons
- HTML
- video
- vertical & horizontal lines
It is not currently possible to place forms, shapes (rectangle/circle), or timers on Fluid Grid Blocks. Please use a standard Instablock or a Global Block for them.
The container settings allow the Fluid Grid Block to automatically arrange your elements, resulting in a more responsive layout. There's no need to worry about manually fixing their positions!
Container settings
You can use each container’s settings to adjust padding and customize the orientation, alignment, and spacing of elements. These settings automatically apply to any screen size, including the mobile view, with the ability to adjust them as necessary. Additionally, each container is numbered to stack in ascending order when transitioning to mobile, making it effortless to create responsive landing pages.
1. Container padding
This setting will determine how much negative space will be allowed on the edges of the container. Your element(s) will be arranged to fit within that space.
You can set this padding in the following units of measurement: pixels (px), percentage (%), rem, em, vh, vw. Feel free to use the one that fits your existing design guidelines.
2. Element flow
These settings set the rules for how elements flow on the page in relation to each other and to the container they have been placed in.
- Flow: choose whether the elements will flow horizontally (left to right) or vertically (top to bottom)
- Justify and Align: align the elements relative to the container's margins. The padding set in the previous step will be respected. "Baseline" refers to the alignment of the baseline of the element to that of its parent (the container).
- Space between: define the amount of space that should be left between the elements. You may use the same units of measurement (px, %, rem, em, vh, vw) as for container padding.
3. Background
Here, you can customize the background of each container. You may add a simple background color or use an image. You can also add a border and round the corners.
Saving Fluid Grid Blocks to your library
Just like regular Instablocks, Fluid Grid Blocks can be saved to your personal library to be reused on other pages in the same workspace. To save a block: click on it > click the three dots in the upper left corner > Save to My Blocks.