Grid With Responsive Columns

The VirtuosoGrid component displays equally sized items, while supporting multiple items per row.

The component provides no styling out of the box; the styling and the layout of the items can be specified by passing two properties - itemClassName and listClassName. Alternatively, you can use styled components and pass them as ItemContainer and ListContainer. Either way, it is up to you to implement the layout with Flexbox or CSS grid. You can use plain old CSS or CSS in JS - the example below uses emotion.

Responsive Layout

You can safely use media queries, min-width, percentages etc. in the item layout definitions. The grid observes the container / item dimensions and recalculates the scroll size accordingly.

Resize your browser and scroll around – the items reposition correctly.

Item 0