---
name: ViewportGrid
menu: General
route: components/viewportGrid
---

import { Playground, Props } from 'docz';
import { DragAndDropProvider, ViewportGrid } from '@ohif/ui';

# ViewportGrid

Used to display viewports in the viewer page.

## Import

```javascript
import { ViewportGrid } from '@ohif/ui';
```

## Basic usage

<Playground>
  <DragAndDropProvider>
  <div className="p-4 h-56">
    <ViewportGrid numRows={1} numCols={2}>
      <div className="flex items-center justify-center h-full text-white">
        Viewport1
      </div>
      <div className="flex items-center justify-center h-full text-white">
        Viewport2
      </div>
    </ViewportGrid>
  </div>
  </DragAndDropProvider>
</Playground>

## Properties

<Props of={ViewportGrid} />