GridLayout

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 = msc.layout("grid", {numCols: 2, hGap: 10});
collection.layout = gl;

Properties#

property	explanation	type	default value
cellBounds	the bounds of the grid cells	Array of Rectangle	[]
colGap	the vertical gap between adjacent columns in the grid	Number	5
colOffset	the number of pixels to shift every other row vertically in the grid	Number	0
dir	the direction in which the items are added to each grid cell	Array	[“l2r”, “t2b”]
group	the group that uses this layout	Group
horzCellAlignment	the horizontal alignment of item in each grid cell	String	“left”
numCols	the number of columns in the grid	Number	undefined
numRows	the number of rows in the grid	Number	undefined
rowGap	the horizontal gap between adjacent rows in the grid	Number	5
rowOffset	the number of pixels to shift every other row horizontally in the grid	Number	0
type	the type of the layout	String	“grid”
vertCellAlignment	the vertical alignment of item in each grid cell	String	“bottom”

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.

Methods inherited from Layout#

method	explanation	return type
clone()	returns a copy of this layout	void
run()	apply this layout	void