Interface GridLayout

GridLayout represents a grid layout in the Penpot application, extending the common layout interface. It includes properties and methods to manage rows, columns, and child elements within the grid.

interface GridLayout {
    alignItems?:
        | "center"
        | "start"
        | "end"
        | "stretch";
    alignContent?:
        | "center"
        | "start"
        | "end"
        | "stretch"
        | "space-between"
        | "space-around"
        | "space-evenly";
    justifyItems?:
        | "center"
        | "start"
        | "end"
        | "stretch";
    justifyContent?:
        | "center"
        | "start"
        | "end"
        | "stretch"
        | "space-between"
        | "space-around"
        | "space-evenly";
    rowGap: number;
    columnGap: number;
    verticalPadding: number;
    horizontalPadding: number;
    topPadding: number;
    rightPadding: number;
    bottomPadding: number;
    leftPadding: number;
    horizontalSizing: "fill" | "auto" | "fit-content";
    verticalSizing: "fill" | "auto" | "fit-content";
    remove(): void;
    dir: "row" | "column";
    rows: Track[];
    columns: Track[];
    addRow(type: TrackType, value?: number): void;
    addRowAtIndex(index: number, type: TrackType, value?: number): void;
    addColumn(type: TrackType, value?: number): void;
    addColumnAtIndex(index: number, type: TrackType, value: number): void;
    removeRow(index: number): void;
    removeColumn(index: number): void;
    setColumn(index: number, type: TrackType, value?: number): void;
    setRow(index: number, type: TrackType, value?: number): void;
    appendChild(child: Shape, row: number, column: number): void;
}

Hierarchy (view full)

Properties

alignItems? alignContent? justifyItems? justifyContent? rowGap columnGap verticalPadding horizontalPadding topPadding rightPadding bottomPadding leftPadding horizontalSizing verticalSizing dir rows columns

Methods

remove addRow addRowAtIndex addColumn addColumnAtIndex removeRow removeColumn setColumn setRow appendChild

Properties

OptionalalignItems

alignItems?:
    | "center"
    | "start"
    | "end"
    | "stretch"

The alignItems property specifies the default alignment for items inside the container. It can be one of the following values:

  • 'start': Items are aligned at the start.
  • 'end': Items are aligned at the end.
  • 'center': Items are centered.
  • 'stretch': Items are stretched to fill the container.

OptionalalignContent

alignContent?:
    | "center"
    | "start"
    | "end"
    | "stretch"
    | "space-between"
    | "space-around"
    | "space-evenly"

The alignContent property specifies how the content is aligned within the container when there is extra space. It can be one of the following values:

  • 'start': Content is aligned at the start.
  • 'end': Content is aligned at the end.
  • 'center': Content is centered.
  • 'space-between': Content is distributed with space between.
  • 'space-around': Content is distributed with space around.
  • 'space-evenly': Content is distributed with even space around.
  • 'stretch': Content is stretched to fill the container.

OptionaljustifyItems

justifyItems?:
    | "center"
    | "start"
    | "end"
    | "stretch"

The justifyItems property specifies the default justification for items inside the container. It can be one of the following values:

  • 'start': Items are justified at the start.
  • 'end': Items are justified at the end.
  • 'center': Items are centered.
  • 'stretch': Items are stretched to fill the container.

OptionaljustifyContent

justifyContent?:
    | "center"
    | "start"
    | "end"
    | "stretch"
    | "space-between"
    | "space-around"
    | "space-evenly"

The justifyContent property specifies how the content is justified within the container when there is extra space. It can be one of the following values:

  • 'start': Content is justified at the start.
  • 'center': Content is centered.
  • 'end': Content is justified at the end.
  • 'space-between': Content is distributed with space between.
  • 'space-around': Content is distributed with space around.
  • 'space-evenly': Content is distributed with even space around.
  • 'stretch': Content is stretched to fill the container.

rowGap

rowGap: number

The rowGap property specifies the gap between rows in the layout.

columnGap

columnGap: number

The columnGap property specifies the gap between columns in the layout.

verticalPadding

verticalPadding: number

The verticalPadding property specifies the vertical padding inside the container.

horizontalPadding

horizontalPadding: number

The horizontalPadding property specifies the horizontal padding inside the container.

topPadding

topPadding: number

The topPadding property specifies the padding at the top of the container.

rightPadding

rightPadding: number

The rightPadding property specifies the padding at the right of the container.

bottomPadding

bottomPadding: number

The bottomPadding property specifies the padding at the bottom of the container.

leftPadding

leftPadding: number

The leftPadding property specifies the padding at the left of the container.

horizontalSizing

horizontalSizing: "fill" | "auto" | "fit-content"

The horizontalSizing property specifies the horizontal sizing behavior of the container. It can be one of the following values:

  • 'fit-content': The container fits the content.
  • 'fill': The container fills the available space.
  • 'auto': The container size is determined automatically.

verticalSizing

verticalSizing: "fill" | "auto" | "fit-content"

The verticalSizing property specifies the vertical sizing behavior of the container. It can be one of the following values:

  • 'fit-content': The container fits the content.
  • 'fill': The container fills the available space.
  • 'auto': The container size is determined automatically.

dir

dir: "row" | "column"

The dir property specifies the primary direction of the grid layout. It can be either 'column' or 'row'.

Readonlyrows

rows: Track[]

The rows property represents the collection of rows in the grid. This property is read-only.

Readonlycolumns

columns: Track[]

The columns property represents the collection of columns in the grid. This property is read-only.

Methods

remove

addRow

  • addRow(type, value?): void

  • Adds a new row to the grid.

    Parameters

    • type: TrackType

      The type of the row to add.

    • Optionalvalue: number

      The value associated with the row type (optional).

    Returns void

    Example

    const board = penpot.createBoard();
    const grid = board.addGridLayout();
    grid.addRow("flex", 1);

addRowAtIndex

  • addRowAtIndex(index, type, value?): void

  • Adds a new row to the grid at the specified index.

    Parameters

    • index: number

      The index at which to add the row.

    • type: TrackType

      The type of the row to add.

    • Optionalvalue: number

      The value associated with the row type (optional).

    Returns void

    Example

    gridLayout.addRowAtIndex(0, 'fixed', 100);

addColumn

  • addColumn(type, value?): void

  • Adds a new column to the grid.

    Parameters

    • type: TrackType

      The type of the column to add.

    • Optionalvalue: number

      The value associated with the column type (optional).

    Returns void

    Example

    const board = penpot.createBoard();
    const grid = board.addGridLayout();
    grid.addColumn('percent', 50);

addColumnAtIndex

  • addColumnAtIndex(index, type, value): void

  • Adds a new column to the grid at the specified index.

    Parameters

    • index: number

      The index at which to add the column.

    • type: TrackType

      The type of the column to add.

    • value: number

      The value associated with the column type.

    Returns void

    Example

    gridLayout.addColumnAtIndex(1, 'auto');

removeRow

  • removeRow(index): void

  • Removes a row from the grid at the specified index.

    Parameters

    • index: number

      The index of the row to remove.

    Returns void

    Example

    gridLayout.removeRow(2);

removeColumn

  • removeColumn(index): void

  • Removes a column from the grid at the specified index.

    Parameters

    • index: number

      The index of the column to remove.

    Returns void

    Example

    gridLayout.removeColumn(3);

setColumn

  • setColumn(index, type, value?): void

  • Sets the properties of a column at the specified index.

    Parameters

    • index: number

      The index of the column to set.

    • type: TrackType

      The type of the column.

    • Optionalvalue: number

      The value associated with the column type (optional).

    Returns void

    Example

    gridLayout.setColumn(0, 'fixed', 200);

setRow

  • setRow(index, type, value?): void

  • Sets the properties of a row at the specified index.

    Parameters

    • index: number

      The index of the row to set.

    • type: TrackType

      The type of the row.

    • Optionalvalue: number

      The value associated with the row type (optional).

    Returns void

    Example

    gridLayout.setRow(1, 'flex');

appendChild

  • appendChild(child, row, column): void

  • Appends a child element to the grid at the specified row and column.

    Parameters

    • child: Shape

      The child element to append.

    • row: number

      The row index where the child will be placed.

    • column: number

      The column index where the child will be placed.

    Returns void

    Example

    gridLayout.appendChild(childShape, 0, 1);

Settings

Member Visibility

On This Page

Properties
Methods