extends Layout

The GridLayout class represents a layout that positions objects in a grid. To create a GridLayout object and apply it to a collection, use the layout function:

let gl = atlas.layout("grid", {numCols: 2, hGap: 10});
collection.layout = gl;


propertyexplanationtypedefault value
type the type of the layoutString“grid”
group the group that uses this layoutGroup
numRowsthe number of rows in the gridNumberundefined
numColsthe number of columns in the gridNumberundefined
rowGapthe horizontal gap between adjacent rows in the gridNumber5
colGapthe vertical gap between adjacent columns in the gridNumber5
cellBounds the bounds of the grid cellsArray of Rectangle[]
horzCellAlignmentthe horizontal alignment of item in each grid cellString“left”
vertCellAlignmentthe vertical alignment of item in each grid cellString“bottom”
dirthe direction in which the items are added to each grid cellArray[“l2r”, “t2b”]

The direction of a grid layout consists of two components: horizontal and vertical. For the horizontal component, there are two options: left to right (l2r), and right to left (r2l); for the vertical component, there are also two options: top to bottom (t2b), and bottom to top (b2t). The order of these two components also matters. The figure below illustrates all the possible directions based on these two components.

grid directions

Figure 1: possible grid directions

Methods inherited from Layout

methodexplanationreturn type
clone() returns a copy of this layoutvoid
run() apply this layoutvoid