Semantic UI React卡片平板视图布局浮动问题求助

看起来你遇到的平板视图卡片错位问题，根源在于你手动将数据按3个一组包裹进了<Grid.Row>里。Semantic UI的Grid组件本身就具备自动根据列数换行的能力，手动分组Row会破坏它的响应式布局逻辑——当屏幕尺寸切换到平板时，每列的宽度会调整，但你的手动Row还是强制把3个卡片放在同一行，导致卡片挤不下后出现错位。

快速解决方案 #

去掉手动分Row的逻辑，直接把所有<Grid.Column>作为<Grid>的子元素，让Semantic UI自动处理行的拆分：

export const Item = ({ _id, title }) => ( 
  <Grid.Column> 
    <Card header={title.toString()} className='item' /> 
  </Grid.Column> 
)

class App extends React.Component {
  constructor() {
    super()
    this.state = { data: [...Array(12).keys()] }
  }
  render() {
    const { data } = this.state
    return(
      <Container>
        <br />
        <Grid stackable doubling columns={3} >
          {/* 直接渲染所有Column，无需手动包裹Row */}
          {data.map(item => (
            <Item title={item} key={item} />
          ))}
        </Grid>
      </Container>
    )
  }
}

为什么这样有效？ #

你添加的stackable和doubling属性已经让Grid具备响应式能力：

• 在桌面端（≥992px），保持3列布局
• 在平板端（768px-991px），自动切换为2列
• 在移动端（<768px），自动堆叠为1列

Semantic UI的Grid会自动根据当前屏幕尺寸的列数，把Column元素拆分成对应的Row，完全不需要手动去分组数据。

特殊场景备选方案 #

如果业务上必须保留手动分组Row的逻辑，你需要针对不同屏幕尺寸调整分组规则，并配合Semantic UI的响应式列属性：
比如给Grid添加响应式列配置，同时根据屏幕尺寸动态分组数据：

// 假设你能通过hooks或媒体查询获取当前屏幕尺寸
const isTablet = window.innerWidth >= 768 && window.innerWidth < 992;
const columns = isTablet ? 2 : 3;
const groupedData = chunk(data, columns);

// 然后渲染
<Grid stackable doubling columns={columns} >
  {groupedData.map(rowItems => (
    <Grid.Row key={rowItems.join('-')}>
      {rowItems.map(item => (
        <Item title={item} key={item} />
      ))}
    </Grid.Row>
  ))}
</Grid>

不过这种方式需要额外处理屏幕尺寸变化的监听，不如让Grid自动处理来得简洁。

内容的提问来源于stack exchange，提问作者Hoknimo