react-grid-layout order horizontally when compactType is vertical

25 views Asked by At

Is there a way to automatically order horizontally the items in react-grid-layout Responsive layout, when the compactType="vertical"?

import { Responsive, WidthProvider } from 'react-grid-layout'

const GridLayout = WidthProvider(Responsive)
...
   <GridLayout
    compactType="vertical"
    breakpoints={{ xs: 0, sm: 600, md: 1000, lg: 1300 }}
    cols={{ xs: 2, sm: 4, md: 6, xl: 8 }}
    >
      {[1, 2, 3].map((item) => (
        <div
            key={item}
            data-grid={{
                w: 2,
                h: 2,
                x: 0,   // Here I don't want to define their position
                y: 0,
                maxW: 2,
                maxH: 2,
                i: item,
            }}
        >{item}</div>
      </GridLayout>

Since it is a responsive grid, I would like to automatically order them horizontally, regardless the breakpoint.

Now they appear in single vertical line, but they should be horizontally ordered and if there is no place for the next item, it should start another horizontal row.

When the compactType is set to vertical, it works as expected, but it changes the behavior of the drag and drop to vertical. I want to keep the vertical behavior and change only the initial ordering.

0

There are 0 answers