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.