Sharing is caring!

React grid system based on minimum and maximum widths 


React grid system – constraint-based responsive grid with no CSS and no media queries.

Build Status


Rgx is an experimental, responsive grid system based on minimum and maximum widths and designed for content-out layout. Rgx is built purely in React and uses inline styles, with no CSS and no media queries. Each Grid row sets its child Cells to display inline block once the Grid is wide enough to fit all Cells’ minimum widths. Once set inline, each Cell’s width is based on the ratio of its own minimum width to the sum of minimum widths per row. Once a Cell hits its max-width, the remaining space is distributed to other Cells in the row. Since this isn’t based on viewport-based media queries, the Grid responds to its own width, similar to element queries.

Getting Started

npm i rgx
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Grid<span class="token punctuation">,</span> Cell <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rgx'</span>

<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  render <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
        Min <span class="token number">256</span> Max <span class="token number">320</span>
        Min <span class="token number">768</span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

React<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#demo'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

Grid Component


  • gutter – pixel value to set negative margins on the Grid component and padding on Cell components to create gutters.
  • min – pixel value to set a default min prop for child Cells

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.