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 is composed of 2 main Components (<Grid /> and <Layout />):

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 :

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

Layout

is a full width layout container that helps with vertical positioning and sizing.

<Layout /> can only contain other <Layout /> or <Grid /> components as children. It is used to define different sections of the page.

<Layout height="parent">
  <Layout fixed="top">
    <Grid margin="0 XS" padding="0 XS">
      <h1>Header</h1>
    </Grid>
  </Layout>
  <Layout height="auto">
    <Grid margin="S" padding="S XS">
      <h1>Body</h1>
    </Grid>
  </Layout>
</Layout>

This example creates a group of <Layout /> components to define a header and body sections. Header will be fixed to the top and body will stretch to fit the parent.

ConfigProvider

Additionally, Reflex 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 several Components derived from <Grid />. They extend or set different default values for <Grid />.

If your needs differ you are encouraged to define your own wrappers or submit a PR!

Offset: source, wiki
Root: source, wiki
Col: source, wiki

Responsive Layouts

Reflex 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.

Dev Mode

To simplify page creation you can use the <Dev /> component which will create a top level grid to have positioning guides. You can find more information here.