Семантический пользовательский интерфейс реагирует на вид таблицы с плавающей сеткой

Question

Я хочу сделать 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>