Grid

The Grid UI component is used to layout content in a matrix format consisting of rows and columns.

Preview​

Code example​

render('Checkout::Dynamic::Render', (root) => {
  return <>
    <Grid
      columns={[100, 'fill', '20%']}
      rows={['auto', 100, 'auto']}
      spacing="loose"
      padding="loose"
      >
      <GridItem columnSpan={3}>
        <View> Grid: </View>
      </GridItem>
      <View border="base" padding="base">
        100 / 100
      </View>
      <View border="base" padding="base">
        fill / 100
      </View>
      <View border="base" padding="base">
        20% / 100
      </View>
      <GridItem columnSpan={2}>
        <View border="base" padding="base">
          100 + fill / auto
        </View>
      </GridItem>
      <View border="base" padding="base">
        20% / auto
      </View>
    </Grid>
  </>;
});

GridProps​

columns?​

The size of each column in the grid layout.

rows?​

The size of each row in the grid layout.

spacing?​

The space between child elements.
When two values are provided, the first value is the row spacing and the second value is the column spacing.

border?​

The border style. This property can be defined using one, two, or four values:

• One Value: Applies the specified style uniformly to all four borders.
• Two Values: The first value sets the style for the vertical borders (top and bottom), and the second value sets the style for the horizontal borders (left and right).
• Four Values: Each value corresponds to an individual border in the following order: top, right, bottom, and left.

cornerRadius?​

The corner radius size.

padding?​

Configures the inner padding.

overflow?​

Configures whether to show or hide overflowing content.

• hidden: Hides overflow.
• visible: Shows overflow.

inlineAlignment?​

Alignment along the horizontal axis.

blockAlignment?​

Alignment along the vertical axis.

Type descriptions​

GridItemSize​

• auto: Expands based on the content and does not proactively fill the remaining space.
• ${number}fr: Distributes the remaining space equally, where number indicates the share of space.
• fill: Fills the space like 1fr but can shrink to 0 when the content is too long to prevent overflow.
• number: Allocates content space according to the specified value. For example, setting 30 will occupy 30px.
• ${number}%: Occupies content space as a percentage according to the configuration. For example, setting 30% will take up 30% of the content space.

Spacing​

BorderStyle​

CornerRadius​

MaybeResponsiveConditionalStyle​

• Example of a plain value: base
• Example of a conditional value: { defaultValue: 'tight', conditionals: [{ conditions: { viewportInlineSize: { min: 'medium' } }, value: 'loose' }] }

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

Refer to Viewport breakpoints.

MaybeShorthandProperty​

ShorthandProperty​