Get Started
Install the package via NPM or Yarn.
$ npm install --save @react-tiny-grid/core
$ yarn add @react-tiny-grid/core
Minimal Configuration
React Tiny Grid works out of the box, so all you have to do is wrap a Column component with a Row component. The magic just happens!
<Row>
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
</Row>
Custom Spacing
You can customize the spacing between each column using the spacing prop. For example: spacing={[x, y]}
<Row spacing={[6, 2]}>
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
</Row>
Max Column Count
To limit how many columns are displayed in a single row, pass in a maxColumnCount prop with a value from 1-12.
<Row maxColumnCount={3}>
<Column />
<Column />
<Column />
<Column />
<Column />
<Column />
</Row>
Custom Column Widths
You can define custom column widths via the widths props, which accepts an array.
<Row breakpoints={[576]}>
<Column widths={[4]} />
<Column widths={[8]} />
<Column widths={[3]} />
<Column widths={[9]} />
<Column widths={[7]} />
<Column widths={[5]} />
</Row>
Multiple Breakpoints
You can set up to three breakpoints to create a unique layout for each screen size.
576px: 3
769px: 2
1000px: 8
576px: 5
769px: 10
1000px: 4
576px: 4
769px: 3
1000px: 2
576px: 4
769px: 9
1000px: 7
576px: 5
769px: 7
1000px: 3
576px: 3
769px: 5
1000px: 12
<Row breakpoints={[576, 769, 1000]}>
<Column widths={[3, 2, 8]} />
<Column widths={[5, 10, 4]} />
<Column widths={[4, 3, 2]} />
<Column widths={[4, 9, 7]} />
<Column widths={[5, 7, 3]} />
<Column widths={[3, 5, 12]} />
</Row>
Column Offsets
You can offset each column a unique amount for each breakpoint. Simply pass in an array to the offsets prop that has the same number of items as the breakpoints array.
<Row breakpoints={[576, 769]}>
<Column widths={[4, 4]} offsets={[1, 0]} />
<Column widths={[3, 6]} offsets={[1, 0]} />
<Column widths={[3, 7]} offsets={[4, 1]} />
<Column widths={[6, 3]} />
<Column widths={[3, 9]} />
<Column widths={[4, 4]} />
</Row>
Demo