# @vx/grid

    npm install --save @vx/grid

The `@vx/grid` package lets you create rows and columns. Or, you can use a `<Grid />` to get them both at once!

## Example

    import { Grid } from '@vx/grid';
    // or
    // import * as Grid from '@vx/grid';
    // <Grid.Grid />

    const grid = (<Grid
      xScale={xScale}
      yScale={yScale}
      width={xMax}
      height={yMax}
      numTicksRows={numTicksForHeight(height)}
      numTicksColumns={numTicksForWidth(width)}
    />);

## `<Grid />`

Name | Default | Type | Description
--- | --- | --- | ---
top |  | number | The top margin in pixels.
left |  | number | The left margin in pixels.
xScale |  | function | A scale function for the xs.
yScale |  | function | A scale function for the ys.
width |  | number | The pixel width of the grid.
height |  | number | The pixel height of the grid.
className |  | string | The class name for the Group element.
stroke |  | string | The color for the stroke of the grid.
strokeWidth |  | number | The width of the lines in the stroke.
strokeDasharray |  | array | The pattern of dashes in the stroke.
numTicksRows |  | number | The number of row lines.
numTicksColumns |  | number | The number of column lines.

## `<Rows />`

Name | Default | Type | Description
--- | --- | --- | ---
top |  | number | The top margin in pixels.
left |  | number | The left margin in pixels.
scale |  | function | A scale function for the rows.
width |  | number | The pixel width of the grid.
stroke | #eaf0f6 | string | The color for the stroke of the lines.
strokeWidth | 1 | number | The width of the lines in the stroke.
strokeDasharray |  |  | The pattern of dashes in the stroke.
className |  |  | The class name for the Group element.
numTicks | 10 | number | The number of row lines.

## `<Columns />`

Name | Default | Type | Description
--- | --- | --- | ---
top |  | number | The top margin in pixels.
left |  | number | The left margin in pixels.
scale |  | function | A scale function for the rows.
height |  | number | The pixel height of the grid.
stroke | #eaf0f6 | string | The color for the stroke of the lines.
strokeWidth | 1 | number | The width of the lines in the stroke.
strokeDasharray |  |  | The pattern of dashes in the stroke.
className |  |  | The class name for the Group element.
numTicks | 10 | number | The number of row lines.

## Source For Components

- `<Grid />`
- `<Rows />`
- `<Columns />`