React Grid

Grid System

Use <Row> and <Col> elements to build a mobile-first grid that scales up to 12 columns as the viewport size increases. Currently, MUI uses the same grid system as Bootstrap so the grid elements and attributes should feel familiar.

Example: Stacked-to-horizontal

import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'muicss/lib/react/container';
import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';

class Example extends React.Component {
  render() {
    return (
      <Container fluid={true}>
        <Row>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
          <Col md="1">md-1</Col>
        </Row>
        <Row>
          <Col md="8">md-8</Col>
          <Col md="4">md-4</Col>
        </Row>
        <Row>
          <Col md="4">md-4</Col>
          <Col md="4">md-4</Col>
          <Col md="4">md-4</Col>
        </Row>
        <Row>
          <Col md="6">md-6</Col>
          <Col md="6">md-6</Col>
        </Row>
      </Container>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Example: Mobile and desktop

import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'muicss/lib/react/container';
import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';

class Example extends React.Component {
  render() {
    return (
      <Container fluid={true}>
        <Row>
          <Col xs="12" md="8">xs-12 md-8</Col>
          <Col xs="6" md="4">xs-6 md-4</Col>
        </Row>
        <Row>
          <Col xs="6" md="4">xs-6 md-4</Col>
          <Col xs="6" md="4">xs-6 md-4</Col>
          <Col xs="6" md="4">xs-6 md-4</Col>
        </Row>
        <Row>
          <Col xs="6">xs-6</Col>
          <Col xs="6">xs-6</Col>
        </Row>
      </Container>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Example: Offsetting columns

import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'muicss/lib/react/container';
import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';

class Example extends React.Component {
  render() {
    return (
      <Container fluid={true}>
        <Row>
          <Col md="4">md-4</Col>
          <Col md="4" md-offset="4">md-4 md-offset-4</Col>
        </Row>
        <Row>
          <Col md="3" md-offset="3">md-3 md-offset-3</Col>
          <Col md="3" md-offset="3">md-3 md-offset-3</Col>
        </Row>
        <Row>
          <Col md="6" md-offset="3">md-6 md-offset-3</Col>
        </Row>
      </Container>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »
« Previous Next »