panel:

Grid Sizing

Grid Sizing

Related help

Cell Layout

The cell layout settings configure the size and number of columns in your grid at each responsive breakpoint, as well as the direction in which it fills.

Cell Layout

For horizontal and vertical layouts, the grid is based on a specified number of columns that scale to fill the width of the grid’s container.  The number of columns varies based on the width of the screen.  The diagram above shows how the size of the screen will map to the number of columns based on the settings.

Horizontal

Horizontal layouts are column based and horizontally.  Enter the number of columns, column gaps and breakpoint settings.

Vertical

Vertical layouts fill vertically before speading across the columns.  The columns will fill in such a way as the columns fill to the same height as well as possible. Enter the number of columns, column gaps and breakpoint settings.

Fixed Width

Fixed width cells will fill left to right and wrap to the next line when it is full.  The number that fit on each line will depend on the screen size.

Columns

Enter the number of columns separated by commas for your grid layout at each breakpoint.  As illustrated in the diagram above, you should enter 1 more column than the number of breakpoints.  If there are less columns specified then the last number will be used for all remaining breakpoints.

Gaps

Enter the gap size between rows and columns for your horizontal and vertical layouts.  As with columns, these are a comma separated list for each responsive breakpoint.  Your columns gaps should be specified with a css unit.

Breakpoints

Enter a comma separated list of breakpoints.  Any number of breakpoints can be specified, but they will only take effect if there is a corresponding column specified.  It is best to ensure the columns and gaps list always have 1 more entry then you have in your breakpoint list (see diagram above).

Cell Width

Cell width applies to fixed width layouts.  Enter the width along with a css unit.

Cell Margins

For fixed width layouts, set a cell margin to determine the spacing between cells.  This setting follows standard css shorthand notation for margins and should include a css unit.