Interface CommonLayout

CommonLayout represents a common layout interface in the Penpot application. It includes various properties for alignment, spacing, padding, and sizing, as well as a method to remove the layout.

interface CommonLayout {
    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;
}

Hierarchy (view full)

Properties

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

Methods

remove

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.

Methods

remove

  • remove(): void

  • The remove method removes the layout.

    Returns void

Settings

Member Visibility

On This Page

Properties
Methods