Flexible Layouts for Dynamic Content

The Resizable Grid Layout provides a flexible, grid-based structure within modals, allowing you to adapt the layout seamlessly to fit different types of content. It is commonly used in data display modals to organize information in a structured, customizable format.

Installation

1. Access the Element Studio:

   • In the Individual App Canvas, hover over the modal where you want to add the grid layout.

   • Click Access Element Studio.

2. Add the Resizable Grid Layout:

   • Inside Element Studio, click Add New Block.

   • Search for "Resizable Grid Layout" and click on it to add it to the modal.

Configuring the Grid Layout

1. Adjust Grid Size:

   • Once the grid layout is added, you can resize each grid cell by dragging its edges, similar to resizing elements in other design tools. This flexibility allows you to create a layout that fits your content precisely.

2. Populate the Grid Cells:

   • Each grid cell can contain either:

     • Plain Text: A field where you can enter freeform text, useful for titles, labels, or brief descriptions.

     • Dashboard Widget: A customizable option that allows you to display data visualizations, such as charts, which can be created and configured by the user to showcase specific data points.

With the Resizable Grid Layout, you can build responsive, structured layouts that can be tailored to display various types of content effectively, from text labels to interactive data visualizations.