Grid

A CSS/Tailwind-style grid container. Lays children into N equal-width columns; rows are auto-sized to the tallest child in each row. Children can span multiple cells with colSpan/rowSpan and be placed explicitly with column/row.

0.0s / 4.0s

Usage

import { createScene, Grid, Rect } from '@motion-script/core';

export default createScene(function* (stage) {
  stage.add(
    <Grid columns={3} gap={16} padding={24} fill="#0a090e" cornerRadius={16}>
      <Rect width="fill" height={120} fill="#6990DD" cornerRadius={8} />
      <Rect width="fill" height={120} fill="#E8617C" cornerRadius={8} />
      <Rect width="fill" height={120} fill="#F5C26B" cornerRadius={8} />
      <Rect width="fill" height={120} fill="#6990DD" cornerRadius={8} colSpan={2} />
      <Rect width="fill" height={120} fill="#E8617C" cornerRadius={8} />
    </Grid>
  );
});

Props

Prop	Type	Default	Description
`columns`	`number`	`1`	Number of equal-width columns
`gap`	`number`	`0`	Shorthand: sets both `columnGap` and `rowGap`
`columnGap`	`number`	`0`	Space between columns in pixels
`rowGap`	`number`	`0`	Space between rows in pixels
`cornerRadius`	`number \| CornerRadiusProps`	`0`	Corner radius for the grid's own background box
`cornerStyle`	`'rounded' \| 'angled' \| CornerStyleProps`	`'rounded'`	Corner shape for the grid box

Child placement props

These props are set on children of a Grid, not on the Grid itself:

Prop	Type	Default	Description
`colSpan`	`number`	`1`	Number of columns this child spans
`rowSpan`	`number`	`1`	Number of rows this child spans
`column`	`number`	–	Explicit column placement (1-based)
`row`	`number`	–	Explicit row placement (1-based)

Size defaults

Condition	`width` default	`height` default
No children	`'fill'`	`'fill'`
Has children	`'hug'`	`'hug'`

Animating

All props animate with .to(). Animate columns to reflow the grid, or gap to expand/collapse spacing:

import { createScene, Grid, Rect, createRef, easeInOut } from '@motion-script/core';

export default createScene(function* (stage) {
  const grid = createRef<Grid>();

  stage.add(
    <Grid ref={grid} columns={4} gap={20} padding={32} fill="#0a090e" cornerRadius={18}>
      {Array.from({ length: 8 }, (_, i) => (
        <Rect
          width="fill"
          height={130}
          fill={['#6990DD', '#E8617C', '#F5C26B'][i % 3]}
          cornerRadius={8}
        />
      ))}
    </Grid>
  );

  // Reflow to 2 columns
  yield* grid().to({ columns: 2 }, 1.0, easeInOut);

  // Reflow back to 4
  yield* grid().to({ columns: 4 }, 1.0, easeInOut);
});

Notes

gap is shorthand: if you set gap and also columnGap/rowGap, columnGap/rowGap win for their respective axes.
Children with width: 'fill' expand to fill their column track width.
Explicit column/row placement uses a 1-based index. Items without explicit placement are auto-placed left-to-right, top-to-bottom.
Grid draws a background box (like Rect) behind its children. Use Row/Column for invisible layout containers.