Grid

Luna
Luna
  • Updated

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.

Grid_overview.jpg

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. 

 

Create a grid

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

Grid_Add__1_.jpg

 

Title display and collapse

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.

Grid_Title.jpg

 

Add columns and rows

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.

Grid_appearance__1_.jpg

 

Duplicate and delete rows and columns

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

 

Reorder rows and columns

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.

 

Adjust columns and row sizing

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.

Grid_sizing.jpg

 

The FR unit

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.

 

Learn more about the FR unit.

 

Min/Max settings

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.

Grid_min_max.jpg

 

Place content in a grid

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.

Grid_Direction.jpg

 

Change the direction in which grid content flows

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.

 

Dynamic Display Rules

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.

 

Style the layout of Grid

Adjust gaps between columns and rows

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.

Grid_Gap.jpg

 

Align content in a grid

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

Grid_Align.jpg

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.

 

Style the Title of Grid

  1. Typography: Set the typography options for the title's text.
  2. Color: Choose the color of the title's text.
  3. Icon Color: Choose the color of the Collapse's icon.
  4. Icon Size: Set the size of the Collapse's icon.
  5. Padding: Set the Padding of the Title area.
  6. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
  7. Radius: Set the border radius to control corner roundness.
  8. Shadow: Adjust box shadow options

 

Advanced Settings

Set the Advanced options that are applicable to this control.

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.