GridItem​

GridItem 是 Grid 布局系统中的子容器组件，用于控制子元素在网格中的定位和跨度。通过 GridItem，你可以轻松实现元素跨多列或多行的布局效果。

预览​

示例代码​

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?​

横跨列数。

rowSpan?​

纵跨行数。

border?​

边框类型，MaybeShorthandProperty 代表支持传入个数可以为 1 或 2 或 4。

• 传入 1 个值，作用所有边框。
• 传入 2 个值，第一个值作用上下边框，第二个值作用左右边框。
• 传入 4 个值，分别作用上右下左。

cornerRadius?​

圆角大小。

padding?​

布局的内边距。

overflow?​

超出展示或者隐藏。

accessibilityRole?​

设置组件内容的语义含义。设置后，辅助技术（如屏幕阅读器）将使用 ARIA 角色 来帮助客户浏览页面。

id?​

用于标识当前组件的唯一标识符。如果未设置 ID，则会使用全局唯一值，全局唯一值为组件内部自行创建的 ID。

类型说明​

Spacing​

BorderStyle​

CornerRadius​

MaybeResponsiveConditionalStyle​

• 普通值示例：base
• 条件值示例：{ defaultValue: 'tight', conditionals: [{ conditions: { viewportInlineSize: { min: 'medium' } }, value: 'loose' }] }

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

参考 视口断点。

MaybeShorthandProperty​

ShorthandProperty​