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>

The table below contains all of the props available in the Grid component.

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.

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

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