import React from 'react';
import ReactDOM from 'react-dom';
import {  Grid, Row, Column as Col } from 'furl-components';

ReactDOM.render(
  <Grid>
    <Row>
      <Col size={3}><div>3</div></Col>
      <Col size={7}><div>7</div></Col>
      <Col size={2}><div>2</div></Col>
    </Row>
    <Row>
      <Col><div>fluid</div></Col>
      <Col><div>fluid</div></Col>
      <Col><div>fluid</div></Col>
      <Col><div>fluid</div></Col>
      <Col><div>fluid</div></Col>
    </Row>
    <Row>
      <Col size={[1,3,4,'fluid']}><div>left</div></Col>
      <Col size={[10,7,6,'fluid']}><div>center</div></Col>
      <Col size={[1,2,2,'fluid']}><div>right</div></Col>
    </Row>
    <Row>
      <Col size={0.23}>23%</Col>
      <Col size={0.17}>17%</Col>
      <Col size={0.11}>11%</Col>
      <Col size={0.49}>49%</Col>
    </Row>
  </Grid>, 
  document.getElementById('root')
);