Radium Grid: A React Grid System Injected with the Power of Radium
20 June 2016
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.
%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
styleprop 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:
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:
An example of setting widths and alignment per screen size for every cell in the grid:
An example of custom per-cell widths and alignments:
The same as above, but with different per-cell widths on small screens:
Custom gutters can use any valid CSS value string. Percentage values create fluid gutters, while all other values create fixed gutters. Example:
While we recommend the default breakpoints, you can customize them:
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!
Discover how powerful the grid can be when you inject a dose of React and Radium!