Use CSS grid to position content within a responsive layout. A Grid is a container used to visually group a set of related contents on your forms and pages.

The grid layout in Yeeflow brings CSS grid to life on a completely visual canvas. This gives you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid to produce powerful, responsive layouts — faster.

You can use grid to create various layouts. For example, you can use it to create a table that you can easily convert into cards on smaller devices.

The Grid allows you to arrange block controls in columns and rows. You can add any number of controls to it, even add one grid inside to another grid.

To create a grid, select the grid control from the Add panel.

Set the title of this grid from Content / Basic panel / Title. Type the title in the textbox. You can control if display or hide the title section by turn ON/OFF from Appearance and Display Title option settings.

Turn Collapse option ON to allow users to collapse and expend the grid content area.

To add columns and rows, go to the Appearance section, lick the + add button that appear on the top-right of the columns and rows settings area.

To duplicate or delete a column or row, click the duplicate or delete button at the end of each column or row.

To reorder rows or columns in the Settings panel, hover over the row or column you’d like to move, then drag the handle that appears.

To adjust the size of grid columns, enter a custom size for both columns and rows in the row or column heading on the canvas or in the Style panel.

The grid layout introduces an extra length unit to help us define a grid: the FR unit. The FR unit represents a fraction of the available space in the grid container. You use it to define the length of rows and columns just like a percentage or pixel unit. But, unlike fixed percentages or pixel units, the FR unit automatically calculates cell space while adjusting for gaps.

Columns with a sizing value of 1FR will stretch or shrink to fill the available space in a grid container. If you add or delete columns, all columns with 1FR unit will adjust accordingly.

Setting min/max values ensures your rows and columns don’t shrink beyond a set minimum value or expand beyond a set maximum value. For example, a row has a default height of auto and will expand or shrink to fit the content inside.

If you want your rows to have a minimum height of let’s say 200px, you can set the min value to 200px and the max value to Auto. This way, the row will grow based on the content and never shrink beyond 200px. You can do the same with columns.

To enter a min/max value for any column or row, enter the desired values in the track heading in the Style panel.

You can add other controls inside a grid: a Textbox field control, an Image, a Gallery control, and even another grid. Anything you add to the grid becomes a child element of that grid. By default, every new grid child will populate an individual grid cell — filling in the next available cell from left to right. If there are no more available cells in a row, a new row will generate to house new grid children.

You can change the direction of the grid children by updating the direction settings in the Style panel. Here, you can select the default row setting, which places children from left to right. Or, change the direction to column, which places children from top to bottom.

You can add multiple elements to a single grid cell by nesting elements within the grid child. To do this, you’ll first want to add a container, to the grid as the direct grid child.

Once you’ve added the Container as the grid child, you can add other elements to that Container by dragging the elements into the grid cell.

To change the position setting of an existing control inside a grid manually, select the control, and go to the Advanced Tab to change the settings under grid child section.

Learn more about Grid Child style settings.

When you set a dynamic display rule for this grid, It behaves differently based on specific conditions and rules. There are Two actions (Hide/Show) for grid control.

Learn how to create dynamic display rules for a control.

Gaps allow you to specify the space between grid items without adding margin or padding. To adjust the gap size between columns and rows, set the value of Columns Gap and Rows Gap.

To update the alignment for all children within a grid, select the grid and change the alignment settings in the Style panel.

Content Padding: Set the padding of the content in each cell.

Background type: Select the Grid control's background color. You may use a solid or gradient color.

Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.

Radius: Set the border radius to control corner roundness.

Set the Advanced options that are applicable to this control.