@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
104 lines (81 loc) • 6.51 kB
Markdown
# Grid
To implement the Grid component in your project, add the import:
```jsx
import Grid from "@kiwicom/orbit-components/lib/utils/Grid";
```
Then you can use it:
```jsx
<Grid columns="4fr minmax(256px, 1fr)">
// You can use your custom components
<Section>Hello world!</Section>
<SideBar>I'm content on the right side.</SideBar>
</Grid>
```
## Props
The table below contains all of the props available in the Grid component.
| Name | Type | Default | Description |
| :----------- | :------------------------- | :------ | :----------------------------------------------------------------------------------------------- |
| **children** | `React.Node` | | The content of the Grid. [See Usage](#usage) |
| className | `string` | | If needed, you can extend the Grid component with `styled` and add your own styles. |
| columns | `string` | `"1fr"` | Property alias for `grid-template-columns`. |
| columnGap | `string` | | Gap size for `columns`. |
| dataTest | `string` | | Optional prop for testing purposes. |
| desktop | [`Object`](#media-queries) | | Object for properties for desktop viewports. [See Media queries](#media-queries) |
| as | `string` | `"div"` | The valid DOM element used for the root node. |
| gap | `string` | | Gap size for `columns` and `rows`. |
| inline | `boolean` | `false` | If `true`, the Grid will have `display: inline-grid`; otherwise it will be `display: grid`. |
| tablet | [`Object`](#media-queries) | | Object for setting up properties for tablet viewports. [See Media queries](#media-queries) |
| largeDesktop | [`Object`](#media-queries) | | Object for setting up properties for largeDesktop viewports. [See Media queries](#media-queries) |
| largeMobile | [`Object`](#media-queries) | | Object for setting up properties for largeMobile viewports. [See Media queries](#media-queries) |
| maxWidth | `string` | | Alias for the `max-width` property of the Grid component. |
| mediumMobile | [`Object`](#media-queries) | | Object for setting up properties for mediumMobile viewports. [See Media queries](#media-queries) |
| rows | `string` | `"1fr"` | Property alias for `grid-template-rows`. |
| rowGap | `string` | | The gap size for `rows`. |
| width | `string` | | Alias for the `width` property of the Grid component. |
| spaceAfter | `enum` | | Additional `padding` to bottom of the Stack. |
### Media Queries
When you need to specify specific behaviours for the Grid component on different viewports, use the appropriate properties.
The component has `mediumMobile`, `largeMobile`, `tablet`, `desktop`, and `largeDesktop`, which behave the same as [mediaQuery](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/utils/mediaQuery) functions.
All of the object for these properties have the same properties and none is required.
| Name | Type | Default | Description |
| :--------- | :-------- | :------- | :------------------------------------------------------------------------------- |
| columns | `string` | `"none"` | Property alias for `grid-template-columns`. |
| columnGap | `string` | | Gap size for `columns`. |
| gap | `string` | | Gap size for `columns` and `rows`. |
| inline | `boolean` | `false` | If `true`, the grid will have `display: inline-grid`; otherwise `display: grid`. |
| maxWidth | `string` | | Alias for the `max-width` property of the Grid component. |
| rows | `string` | `"none"` | Property alias for `grid-template-rows`. |
| rowGap | `string` | | Gap size for `rows`. |
| width | `string` | | Alias for the `width` property of the Grid component. |
| spaceAfter | `enum` | | Additional `padding` to bottom of the Stack. |
### enum
| spaceAfter |
| :----------- |
| `"none"` |
| `"smallest"` |
| `"small"` |
| `"normal"` |
| `"medium"` |
| `"large"` |
| `"largest"` |
## Why you should use this component
The main focus of this component is to provide an API that solves the most common issues and gives you a quick how to start using CSS grids in your project without worries.
By default, this Grid component handles:
- Compiling the `repeat` function to the old specification
- Auto-placement of its children
## Usage
This component works the same way as a native CSS grid, so it expects the same hierarchy when it comes to using children.
For instance, when you want to define a Grid that has two columns and two rows, the complete usage should look like this:
```jsx
import Grid from "@kiwicom/orbit-components/lib/utils/Grid";
// your custom component to fill each cell in the grid
import Cell from "./Cell";
const Example = () => (
<Grid columns="1fr 1fr" rows="1fr 1fr">
<Cell>First column, first row</Cell>
<Cell>Second column, first row</Cell>
<Cell>First column, second row</Cell>
<Cell>Second column, second row</Cell>
</Grid>
);
```