Adjusting React-Grid-Layout cols Attribute to Display in Pixels and Handle Overflow

Question

I am working with React-Grid-Layout to create data grid layout. The current implementation uses the cols attribute with grid units. However, I need to display the grid in pixels and introduce scrolling functionality when the pixel limit is exceeded, rather than layouts overlapping or breaking.

Here is a snippet of the relevant code:

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

const ResponsiveReactGridLayout = WidthProvider(Responsive);

const selectedLayout = [
  {
    i: '8',
    x: 0,
    y: 0,
    w: 6,
    h: 10,
  },
  {
    i: '10',
    x: 6,
    y: 0,
    w: 7,
    h: 10,
  },
];

<div>
  <ResponsiveReactGridLayout
    layouts={{ lg: selectedLayout }}
    cols={{ lg: 12 }} {/* How can I make this in pixels instead of grid units? */}
    rowHeight={rowHeight}
    margin={[0, 0]}
  >
    {selectedLayout &&
      selectedLayout.map((layout) => (
        <div data-grid={layout} key={layout.i} >
          <Card className="board-creation-card">
            <Button
              type="tertiary"
              prefixIcon={{ name: 'add' }}
              title={'add'}
            />
          </Card>
        </div>
      ))}
  </ResponsiveReactGridLayout>
</div>