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.
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
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
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.
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 fewer 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. 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.
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.