Getting Started

This guide assumes some familiarity with React, CSS and the npm ecosystem. If you need help getting started, check out these video series or ping us on gitter.

For an introduction to grid systems in general, check out Intro to Grids.

Now that we covered the prerequisites, let's jump right in! gymnast has one main component: <Grid />

Grid

is an infinitely nestable column layout container. It defaults to 12 columns.

<Grid> {/* no size defaults to max (12) */}
  <Grid size={4}>A 4 column grid</Grid>
  <Grid size={8}>
    <Grid size={12}>foo</Grid>
  </Grid>
</Grid>

This will render a <Grid /> that itself contains 2 grids, a size 4 and a size 8 one. Since 4 + 8 = 12, this takes the full width of the parent one. We can add more <Grid /> elements and they'll just overflow to the next row as seen here.

Also note that inside the grid of size 8 we have another grid of size 12. These 12 columns are relative to the size of <Grid size={8} />. That's the nestable part. Every time you create a new <Grid /> it defines 12 new columns within itself.

If you want a different column layout, you can customize it through :

<GymnastProvider columns={15}>
  <Grid /> { /* Now size defaults to 15 */ }
  <Grid size={14} />
</GymnastProvider>

GymnastProvider

Additionally, gymnast can be customized through the usage of this component. It allows changing internal properties like the number of columns or the gutter size and defining aliases for media queries. Check the section for more info.

Other Components

gymnast includes a <Col /> component, derived from <Grid /> which sets different default margins which make placing components side-by-side easier.

Source
Wiki

Responsive Layouts

gymnast has support for responsive layouts out of the box. If you want to see how to adapt your layout to multiple screen sizes and orientations, check Responsive Grids for more info.