Grid system for React, and more
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6a3978e Feb 15, 2018
Failed to load latest commit information.
dist rollback withCss for dom Jan 17, 2018
example rename Breakpoint Dec 14, 2017
media screenshot Dec 8, 2017
src rollback withCss for dom Jan 17, 2018
.gitignore ignore example/build/ Dec 6, 2017
.npmignore example Dec 6, 2017
LICENSE Initial commit Dec 3, 2017 readme Breakpoint to Match Dec 14, 2017
package-lock.json 0.0.41 Feb 15, 2018
package.json 0.0.41 Feb 15, 2018


React inline-style solution for frontend development. CSS free.

Why Javascript styling instead of CSS? Check out this video


No CSS file needed.

npm install --save fluid-react


Of course I am biased, to me this is the simplest to use library in this category.

Mobile vs Desktop

> npm install --save fluid-react


import React, { Component } from 'react';
import { Container, Row, Col } from 'fluid-react';

export default class App extends Component {
    render() {
        return (
                    <Col xs="12" md="3">Sidebar</Col>
                    <Col xs="12" md="9">Main Section</Col>


Documentation is on Live Demo

To run documentation/demo in local:

git clone
cd fluid-react/example
npm install
npm start



    const style = {
        margin: 'auto 1rem',
        padding: '2rem',
        color: '#fff',
        backgroundColor: '#0275d8',
        borderColor: '#0275d8',
        '@media (min-width: 576px) and (max-width: 767px)': {
            backgroundColor: '#5cb85c',
            borderColor: '#5cb85c'
        '@media (min-width: 768px) and (max-width: 991px)': {
            backgroundColor: '#5bc0de',
            borderColor: '#5bc0de'
        '@media (min-width: 992px) and (max-width: 1199px)': {
            backgroundColor: '#f0ad4e',
            borderColor: '#f0ad4e'
        '@media (min-width: 1200px)': {
            backgroundColor: '#d9534f',
            borderColor: '#d9534f'


    export const MatchBlocks = (props) => (
            <Match show="xs,sm">xs, sm</Match>
            <Match show="md,lg">md,lg</Match>
            <Match show="xl">xl</Match>

Pseudo Element

    const brandStyle = {
        fontSize: '24px',
        verticalAlign: 'top',
        padding: '4px',
        '::before': {
            content: '',
            display: 'inline-block',
            width: '64px',
            height: '32px',
            backgroundImage: 'url(',
            backgroundSize: '64px 32px'


Base on Bootstrap 12 column grid system. A mobile-first grid system for React.

            <Col xs="12" sm="6" md="4" lg="3" xl="2">1</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">2</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">3</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">4</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">5</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">6</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">7</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">8</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">9</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">10</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">11</Col>
            <Col xs="12" sm="6" md="4" lg="3" xl="2">12</Col>