Grid

Grid lays objects out in rows and columns and returns a backing Group that can be positioned or animated as one object.

import { Grid, Rectangle, Slide, Text } from "presenter";
const { grid } = Grid({  rows: 2,  cols: 4,  width: 650,  height: 400,  gapX: 80,  gapY: 100,  objects: (row, col) =>    Group(      [        Rectangle({          fillColor: COLORS[row * 4 + col],          /* ... additional properties ... */        }),        Text(String(row * 4 + col + 1), {          /* ... additional properties ... */        }),      ],      {        width: 650,        height: 400,      },    ),    /* ... additional properties ... */});
const slide = Slide({  objects: [grid],});

Set rows, cols, the cell width and height, and optional gapX and gapY. The objects(row, col) callback creates the object for each cell; return null to leave a cell empty.

import { Grid } from "presenter";

const { grid, objects } = Grid({
  rows: 3,
  cols: 4,
  width: 600,
  height: 300,
  objects: (row, col) => createCard(row, col),
});

Add grid to the slide. The two-dimensional objects array contains the original object for each cell, which is useful for animating individual cells later.

width and height may also be functions of (row, col) when cell dimensions vary. Pass additional backing-group properties through groupProps.

The full list of available Grid properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of grid sits at (x, y)	Anchor.TOP_LEFT
cols	number	Number of columns in the grid	1
gapX	number	Horizontal space between grid cells, in pixels	0
gapY	number	Vertical space between grid cells, in pixels	0
groupProps	Partial<Group>	Group properties to apply to grid	{}
height	number | (row: number, col: number) => number	Height of a cell in the grid, in pixels	0
objects	(row: number, col: number) => SlideObject | null	Function that generates grid cells	() => null
rows	number	Number of rows in the grid	1
width	number | (row: number, col: number) => number	Width of a cell in the grid, in pixels	0
x	number	Horizontal position of grid	0
y	number	Vertical position of grid	0

The Grid constructor returns:

• grid: A Group that can be added to the objects of a slide to render the grid.
• objects: A (SlideObject | null)[][] 2D-array of all objects in the grid.