語義ui反應表網格視圖浮動卡問題

Question

我想使用語義ui用card做3列。 但是在平板電腦視圖上時我遇到問題。 該卡是浮動的，但在台式機和移動設備上都可以正常工作。

預覽以將其調整為表格大小https://8z7nv1olql.codesandbox.io/

或者我只是在這里附上圖片

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

    console.log(data)

    return(
      <Container>
      <br />
      <Grid stackable doubling columns={3} >
        {chunk(data, 3).map(o => {
          return (<Grid.Row>{o.map(o2 => {
            return (
              <Item title={o2} />
            )
          })}</Grid.Row>)
        })}
      </Grid>
      </Container>
    )
  }
}

完整代碼： https ： //codesandbox.io/s/8z7nv1olql

我在上面創建了一個縮圖，而不是扔掉我的大項目代碼。

Answer 1

把班級doubling 。

<Grid stackable columns={3} >
  {chunk(data, 3).map(o => {
    return (<Grid.Row>{o.map(o2 => {
      return (
        <Item title={o2} />
      )
    })}</Grid.Row>)
  })}
</Grid>