<commit_before># react-reflex-grid
React.js wrapper for [reflex-grid](http://leejordan.github.io/reflex/docs/) library. 

## Usage

### Simple usage

```jsx harmony
<Row>
    <Col size="6">COL A</Col>
    <Col size="6">COL B</Col>
</Row>
```
or
```jsx harmony
<Row>
    <Col size="md-3">COL X</Col>
    <Col size="md-3">COL Y</Col>
    <Col size="md-3">COL Z</Col>
    <Col size="md-3">COL R</Col>
</Row>
```

### Apply style classes
```jsx harmony
<Row className="bg">
    <Col size="6" className="fg">COL A</Col>
    <Col size="6" className="fg">COL B</Col>
</Row>
```

### Auto column size
```jsx harmony
<Row className="bg">
    <Col size="3">COL A</Col>
    <Col size "3">COL B</Col>
    <Col auto>Auto Col Size</Col>
</Row>
```

## Components

### Row
Container for columns. At the moment, no properties may be set.

### Col
Column element. The following properties may be set:
- `size` or `col` (**deprecated**) - the size of column. May be set as number, or number with prefix, when collapsible column is required. 
For example `6`, or `md-6` or `xs-9` is valid for `size` property.

- `auto` - set column size to auto. Example: `<Col auto>...</Col>`

For more information about valid prefixes, please, see the following article: [Breakpoints](http://leejordan.github.io/reflex/docs/#breakpoints)<commit_msg>README file updated with following properties: breakpoints and bleed.<commit_after># react-reflex-grid
React.js wrapper for [reflex-grid](http://leejordan.github.io/reflex/docs/) library. 

## Components

### Row
Container for columns. The following properties may be set:
- `bleed` - remove the internal padding on the entire grid.

### Col
Column element. The following properties may be set:
- `size` - the size of column. Should be set as a number: `<Col size={6}>...</Col>`.
- `col` (**deprecated**) - the size of column. Should be set as a string, like `<Col col="6">` or `Col col="md-6">`.
- `auto` - set column size to auto. Example: `<Col auto>...</Col>`.
- `xs`, `sm`, `md`, `lg`, `xlg` - set the breakpoint for column. Example: `<Col size={6} md>...</Col>`. For more information about breakpoints, please see http://reflexgrid.com/docs/#breakpoints
- `bleed` - remove the internal padding on the specific column. Example: `<Col bleed>....</Col>`.

For more information about valid prefixes, please, see the following article: [Breakpoints](http://leejordan.github.io/reflex/docs/#breakpoints)

## Usage

### Simple usage
```jsx harmony
<Row>
    <Col size={6}>COL A</Col>
    <Col size={6}>COL B</Col>
</Row>
```
or
```jsx harmony
<Row>
    <Col size={3}>COL X</Col>
    <Col size={3}>COL Y</Col>
    <Col size={3}>COL Z</Col>
    <Col size={3}>COL R</Col>
</Row>
```

### Apply style classes
```jsx harmony
<Row className="bg">
    <Col size={6} className="fg">COL A</Col>
    <Col size={6} className="fg">COL B</Col>
</Row>
```

### Auto column size
```jsx harmony
<Row>
    <Col size={3}>COL A</Col>
    <Col size {3}>COL B</Col>
    <Col auto>Auto Col Size</Col>
</Row>
```

### Breakpoints
```jsx harmony
<Row>
    <Col size={3} md>COL A</Col>
    <Col size={3} md>COL B</Col>
    <Col auto>Auto Col Size</Col>
</Row>
```

### Bleed
#### Grid
```jsx harmony
<Row bleed>
    <Col size={6}>COL A</Col>
    <Col size={6}>COL B</Col>
</Row>
```

#### Column
```jsx harmony
<Row>
    <Col size={6} bleed>COL A</Col>
    <Col size={6}>COL B</Col>
</Row>
```
{'fraction_non_alphanumeric': 0.19952704699970442, 'fraction_numerical': 0.00975465563109666, 'mean_word_length': 3.719665271966527, 'pattern_counts': {'":': 0, '<': 94, '<?xml version=': 0, '>': 95, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2380662', 'n_tokens_mistral': 1217, 'n_tokens_neox': 1187, 'n_words': 384}