Radium Grid: A React Grid System Injected with the Power of Radium

20 June 2016

Tyler Thompson

Tyler Thompson

Check out Radium Grid on GitHub!

After spending my formative frontend years implementing layouts with the CSS grid systems from both Bootstrap and Foundation, I developed a clear understanding of the strengths and weaknesses of both. Later, grid systems like Jeet solved many of the pain points of the old grids: no more fixed-column straitjacket; support for arbitrary fractions; the removal of junk “row” DOM elements (and the obsolesence of the concept of fixed rows).

Fast-forward to this year, where we at Formidable are hooked on the power of inline styles using Radium. How could I integrate the best of the various (S)CSS grid systems into a simple React component without a CSS preprocessor?

Enter Radium Grid, a powerful, no-fuss grid system component for React. It combines the best decisions from the ecosystem of (S)CSS-based grid systems and implements them hack-free on top of Flexbox.

What differentiates Radium Grid from the crowd of today’s grid systems?

  • It’s just a React component. Don’t worry about the layout implementation of the grid–just declare what you want in JSX!
  • Includes sensible defaults. Radium Grid renders the least surprising thing when given no or few props.
  • Uses arbitrary fractions for cell widths. Mix and match different denominators to your heart’s content. You can be as precise as you want to be without being beholden to a 12- or 24-column straitjacket!
  • Infers rows from the given cell sizes. You don’t even have to declare rows anymore–it’s just math! No more junk row DOM nodes either!
  • Customizable horizontal and vertical cell alignment. No hacks here–it’s just Flexbox!
  • Customizable fixed-width and fluid-width gutters. You can pass in any CSS unit (e.g. px for fixed, % for fluid) and Radium Grid will calculate everything behind the scenes.
  • Customizable media queries for grid breakpoint definitions. Radium Grid includes sensible mobile, tablet, and desktop breakpoints, but can accept any number of custom media queries.
  • Integrates with Radium. Passing arrays to the style prop works just as it would in Radium!
  • Infinitely customizable with cascading defaults. Set cell props on:
    • all cells for all sizes,
    • all cells for individual sizes,
    • a single cell for all sizes,
    • a single cell for individual sizes,
    • …with the lowest props in the tree overriding parent props.

But that’s enough talk. What does Radium Grid look like in practice?

Using Radium Grid

Be sure to resize the JSBin output window or follow the links to the following examples to see the behavior of the grid on different screen sizes!

A barebones Radium Grid looks like the following:

Radium Grid: Barebones on jsbin.com

The above example will render with the following provided defaults:

  • All cells in the grid are 1/3 wide for all screen sizes.
  • The grid uses a 16px fixed gutter.
  • Cell content is aligned to the top left.
  • The breakpoints use the following media queries:
    • small: "@media only screen and (max-width: 640px)",
    • medium: "@media only screen and (min-width: 641px) and (max-width: 1024px)",
    • large: "@media only screen and (min-width: 1025px) and (max-width: 1440px)",
    • xlarge: "@media only screen and (min-width: 1441px)"

To set a default width and alignment for every cell in the grid:

Radium Grid: Default Width and Alignment on jsbin.com

An example of setting widths and alignment per screen size for every cell in the grid:

Radium Grid: Responsive on jsbin.com

An example of custom per-cell widths and alignments:

Radium Grid: Custom Cell Width and Alignment on jsbin.com

The same as above, but with different per-cell widths on small screens:

Radium Grid: Responsive with Custom Width on jsbin.com

Custom gutters can use any valid CSS value string. Percentage values create fluid gutters, while all other values create fixed gutters. Example:

Radium Grid: Custom Gutters on jsbin.com

While we recommend the default breakpoints, you can customize them:

Radium Grid: Custom Breakpoints on jsbin.com

Coming Soon to a Grid Near You

Our most community-requested feature is cell offsets (made popular in Bootstrap and Foundation), so that’ll be our first priority in the next release. We’re also reconsidering the behavior and media queries of our default breakpoints

Try Radium Grid Today!

Radium Grid is fresh, but has a stable API. We’d love to hear your feedback on the API and any of its default behaviors through the issues in the GitHub repo.

Discover how powerful the grid can be when you inject a dose of React and Radium!

Related Posts