Grid Sizing

Grid Sizing

Related help

Cell Layout

The cell layout settings in the Advanced Grid Builder plugin allow you to customise the appearance of your grid. These settings control the size and number of columns in your grid at each responsive breakpoint, as well as the direction in which it fills. A responsive breakpoint is a point at which the layout of your website will change to accommodate different screen sizes.

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 can change 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 layouts are column-based and fill horizontally. Here, you can enter the number of columns, the size of the gaps between columns, and the responsive breakpoint settings.


Vertical layouts fill vertically before spreading across the columns. The columns will fill in such a way that they reach the same height as much as possible. Here too, you can enter the number of columns, the size of the gaps between columns, and the responsive breakpoint settings.

Fixed Width

Fixed width cells will fill from 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.


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 fewer columns specified then the last number will be used for all remaining breakpoints.


Enter the gap size between rows and columns for your horizontal and vertical layouts. These are a comma-separated list for each responsive breakpoint. Your column gaps should be specified with a css unit, which is a measurement used in web design.


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.