Penpot plugins API
    Preparing search index...

    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"
        | "fix";
        verticalSizing: "fill" | "auto" | "fix";
        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 Summary)

    Index

    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

    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.
    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.
    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.
    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: number

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

    columnGap: number

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

    verticalPadding: number

    The verticalPadding property specifies the vertical padding inside the container.

    horizontalPadding: number

    The horizontalPadding property specifies the horizontal padding inside the container.

    topPadding: number

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

    rightPadding: number

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

    bottomPadding: number

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

    leftPadding: number

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

    horizontalSizing: "fill" | "auto" | "fix"

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

    • 'fix': The containers has its own intrinsic fixed size.
    • 'fill': The container fills the available space. Only can be set if it's inside another layout.
    • 'auto': The container fits the content.
    verticalSizing: "fill" | "auto" | "fix"

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

    • 'fix': The containers has its own intrinsic fixed size.
    • 'fill': The container fills the available space. Only can be set if it's inside another layout.
    • 'auto': The container fits the content.
    dir: "row" | "column"

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

    rows: Track[]

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

    columns: Track[]

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

    Methods

    • 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

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

    • 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

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

    • 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

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

    • 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

      gridLayout.addColumnAtIndex(1, 'auto');

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

      Parameters

      • index: number

        The index of the row to remove.

      Returns void

      gridLayout.removeRow(2);

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

      Parameters

      • index: number

        The index of the column to remove.

      Returns void

      gridLayout.removeColumn(3);

    • 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

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

    • 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

      gridLayout.setRow(1, 'flex');

    • 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

      gridLayout.appendChild(childShape, 0, 1);

    Settings

    Member Visibility

    On This Page

    Properties
    Methods