Responsive Grid Layout

Add - To add a new column to the columns list

Move - To rearrange the columns among the set

Duplicate - To make a copy of the existing column

Delete - To remove an existing column from the set

Min. Width

Set the minimum width for the colum in "px" terms.

Background

Specify the background colour for the column.

Background Image

Provide a valid URL for the image that renders as the background for the column.

Border Color

Mention the color for the column border.

Border Radius

Sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

Margin

This value is set in terms of "px" number which creates the space between the border and the content of the column.

Padding

This value is set in terms of "px" number which creates the space between the border and outer elements.

Auto

The height is auto-adjusted for the content

Fixed

The height of the widget is fixed and will not adjust to the content

Horizontal

Specifies the gap between the columns in horizontally

Vertical

Specifies the gap between the columns in vertically

Start

Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis.

Center

Centers the alignment subject within its alignment container.

End

Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis.

Space-between

The alignment subjects are evenly distributed in the alignment container.

Space-around

The alignment subjects are evenly distributed in the alignment container, with a half-size space on either end.

Space-evenly

The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.

Top

Aligns the subjects to the top of the container.

Middle

Aligns the subjects in the middle of the container.

Bottom

Aligns the subjects in the bottom of the container.

This is the background space of the widget, behind all the columns. Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the front element clearly.

The is the colour of the shadow that is generated behind the widget box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area. "x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box. "y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box. "Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away. "Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.

Set the colour to the border lines. The border lines will be shown only if that is enabled.

This sets the radius of the widget's corners, enabling rounded corners on the widget. This value is defined in "px" terms.

This value is set in terms of "px" number, which creates the space between the border and outer elements.

This value is set in terms of "px" number, which creates the space between the border and the content of the widget.

Set the thickness of the border of the widget using this value. It is defined using "px" terms.

This is the background space of each column. Users can change the colour of the background using this property. It has all the RGB colour ranges to pick from. It is recommended to use a corresponding background colour that shows the front element clearly.

The is the colour of the shadow that is generated behind the column box. The X and Y axis values can be altered such that the shadow can be set to fall anywhere behind the widget area. "x-offset" - a positive number specifies the shadow will be on the right of the box, and a negative number will put the shadow on the left of the box. "y-offset" - a negative one means the shadow will be above the box, and a positive number means the shadow will be below the box. "Blur" - if the number is set to 0 then the shadow will be sharp. It will more blurred as the number goes higher, and the shadow will extend further away. "Color" - sets the colour of the shadow. If the colour is not set, the box shadows are drawn in the foreground colour.

Set the colour to the borderlines for each column. The borderlines will be shown only if that is enabled.

This sets the radius on the corners of each column, enabling rounded corners to the column box. This value is defined in "px" terms.

This value is set in terms of "px" number, which creates the space between the border of the column and the outer space.

This value is set in terms of "px" number, which creates the space between the border and the content inside the column box.

Set the thickness of the border of the widget using this value. It is defined using "px" terms.