Grid

To implement the Grid component in your project, add the import:

import Grid from "@kiwicom/orbit-components/lib/utils/Grid";

Then you can use it:

<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
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`		Object for properties for desktop viewports. See 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`		Object for setting up properties for tablet viewports. See Media queries
largeDesktop	`Object`		Object for setting up properties for largeDesktop viewports. See Media queries
largeMobile	`Object`		Object for setting up properties for largeMobile viewports. See Media queries
maxWidth	`string`		Alias for the `max-width` property of the Grid component.
mediumMobile	`Object`		Object for setting up properties for mediumMobile viewports. See 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 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:

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>
);