GridItem​

GridItem is a sub-container component within the Grid layout system, used to control the positioning and span of child elements within the grid. With GridItem, you can easily achieve layout effects that allow elements to span multiple columns or rows.

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>
  </>;
});

GridItemProps​

columnSpan?​

The number of columns to span.

rowSpan?​

The number of rows to span.

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.

accessibilityRole?​

Sets the semantic meaning of the component content. Once set, assistive technologies such as screen readers will use ARIA roles to help customers navigate the page.

id?​

A unique identifier for the UI component.
If this property is not set, the system will automatically generate a globally unique ID for this component.

Type descriptions​

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​