rax-grid

Grid

Simple layout of the label, providing external layout container label Row, column Col, multi row layout reference MultiRow。

Long list of requirements do not use a large MultiRow components for a unified layout, without a complete large label wrap will be better.

Install

$ npm install rax-grid --save

Import

import { Row, Col } from 'rax-grid';

Example

Equal width layout

The 3 column：

<Row>
  <Col>列1</Col>
  <Col>列2</Col>
  <Col>列3</Col>
</Row>

The 2 column：

<Row>
  <Col>列1</Col>
  <Col>列2</Col>
</Row>

Custom column width

const styles = {
  col1: {
    flex: 1
  },
  col2: {
    flex: 2
  },
}
<Row>
  <Col style={styles.col1}>flex: 1</Col>
  <Col style={styles.col2}>flex: 2</Col>
</Row>

// demo
import { createElement, render, Component } from 'rax';
import { Row, Col } from 'rax-grid';

const styles = {
  container: {
    width: 750
  },
  row: {
    height: 400
  }
};

class App extends Component {
  render() {
    return (
      <Row style={[styles.container, styles.row]}>
        <Col style={{flex: 1, backgroundColor: 'red'}}>Col1</Col>
        <Col style={{flex: 1, backgroundColor: 'green'}}>Col2</Col>
        <Col style={{flex: 1, backgroundColor: 'blue'}}>Col3</Col>
      </Row>
    );
  }
}

render(<App />);