TypstDocumentation

gridElement
Question mark

Arranges content in a grid.

The grid element allows you to arrange content in a grid. You can define the number of rows and columns, as well as the size of the gutters between them. There are multiple sizing modes for columns and rows that can be used to create complex layouts.

The sizing of the grid is determined by the track sizes specified in the arguments. Because each of the sizing parameters accepts the same values, we will explain them just once, here. Each sizing argument accepts an array of individual track sizes. A track size is either:

To specify a single track, the array can be omitted in favor of a single value. To specify multiple auto tracks, enter the number of tracks instead of an array. For example, columns: 3 is equivalent to columns: (auto, auto, auto).

Examples

The example below demonstrates the different track sizing options.

// We use `rect` to emphasize the
// area of cells.
#set rect(
  inset: 8pt,
  fill: rgb("e4e5ea"),
  width: 100%,
)

#grid(
  columns: (60pt, 1fr, 2fr),
  rows: (auto, 60pt),
  gutter: 3pt,
  rect[Fixed width, auto height],
  rect[1/3 of the remains],
  rect[2/3 of the remains],
  rect(height: 100%)[Fixed height],
  image("tiger.jpg", height: 100%),
  image("tiger.jpg", height: 100%),
)
Preview

You can also spread an array of strings or content into a grid to populate its cells.

#grid(
  columns: 5,
  gutter: 5pt,
  ..range(25).map(str)
)
Preview

Parameters
Question mark

columns
auto or int or relative or fraction or array
Settable
Question mark

The column sizes.

Either specify a track size array or provide an integer to create a grid with that many auto-sized columns. Note that opposed to rows and gutters, providing a single track size will only ever create a single column.

Default: ()

rows
auto or int or relative or fraction or array
Settable
Question mark

The row sizes.

If there are more cells than fit the defined rows, the last row is repeated until there are no more cells.

Default: ()

gutter
auto or int or relative or fraction or array
Settable
Question mark

The gaps between rows & columns.

If there are more gutters than defined sizes, the last gutter is repeated.

Default: ()

column-gutter
auto or int or relative or fraction or array
Settable
Question mark

The gaps between columns. Takes precedence over gutter.

Default: ()

row-gutter
auto or int or relative or fraction or array
Settable
Question mark

The gaps between rows. Takes precedence over gutter.

Default: ()

children
content
RequiredPositional
Question mark
Variadic
Question mark

The contents of the grid cells.

The cells are populated in row-major order.