gymnast is a configurable grid for React

With gymnast, you can eliminate your layout css or reduce it to just a few lines.

Learn how to use gymnast in your own project.

or

Play with a demo

If you are migrating from gymnast 16, check the migration guide.

We have several examples on the website. Here is one of them:

import * as React from 'react'
import { Grid } from 'gymnast'

function App() {
  return (
    <Grid>
      <Grid size={5} margin="XL 0">
        Content Here
      </Grid>
      <Grid size={7}>More Content</Grid>
    </Grid>
  )
}

This will create 2 columns of sizes 5, 7, respectively.

For a deeper dive into gymnast, check out the docs, the examples here or follow the Getting Started guide.

gymnast is available as the gymnast package on npm. It is also available on the unpkg CDN.

You can install it with:

yarn add gymnast

React is a peer dependency of the generated bundle.

The main purpose of this repository is to continue to evolve gymnast, making it more capable and easier to use. Development of gymnast happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Check the contributing.md to learn how you can take part in improving gymnast.

Thanks goes to these wonderful people (emoji key):

Oscar Bartra 🐛 💻 📖 👀	Andrew Hansen 💬 🐛 💻 👀	Stephen Nomura 🎨	Andrew Toy 🐛 💻 💡	colinlgray 🐛	Jeffrey Klein 🐛 💻 ⚠️	Derrick Nguyen 💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind are welcome!

Process	Status
Code Quality
Versioning
Dependencies
File Size
Questions