<commit_before># react-grid-system
A powerful Bootstrap-like responsive grid system for React.

[![NPM version][version-image]][npm-url] [![Downloads][downloads-image]][npm-url]

## Table of contents

* [Installation](#installation)
* [Getting started](#getting-started)
* [Configuration](#configuration)
* [API documentation](#api-documentation)
* [ScreenClass Context API](#screenclass-context-api)
* [Example application with SSR](#example-application-with-ssr)

## Installation

```
# Install react peer dependency
npm install react@16

# Install react grid system
npm install react-grid-system --save
```
## Getting started

### Responsive grid

`react-grid-system` provides a responsive grid similar to Bootstrap (see: https://getbootstrap.com/docs/4.1/layout/grid/). However, `react-grid-system` is purely React, even no CSS or class names are used. Moreover, it adds various powerful features, such as setting breakpoints and gutter widths through React's context.

Three components are provided for creating responsive grids: `Container`, `Row`, and `Col`.

An example on how to use these:

```javascript
import { Container, Row, Col } from 'react-grid-system';

<Container>
  <Row>
    <Col sm={4}>
      One of three columns
    </Col>
    <Col sm={4}>
      One of three columns<commit_msg>add screenclass context api to toc<commit_after># react-grid-system
A powerful Bootstrap-like responsive grid system for React.

[![NPM version][version-image]][npm-url] [![Downloads][downloads-image]][npm-url]

## Table of contents

* [Installation](#installation)
* [Getting started](#getting-started)
* [Configuration](#configuration)
* [ScreenClass Context API](#screenclass-context-api)
* [API documentation](#api-documentation)
* [Example application with SSR](#example-application-with-ssr)

## Installation

```
# Install react peer dependency
npm install react@16

# Install react grid system
npm install react-grid-system --save
```
## Getting started

### Responsive grid

`react-grid-system` provides a responsive grid similar to Bootstrap (see: https://getbootstrap.com/docs/4.1/layout/grid/). However, `react-grid-system` is purely React, even no CSS or class names are used. Moreover, it adds various powerful features, such as setting breakpoints and gutter widths through React's context.

Three components are provided for creating responsive grids: `Container`, `Row`, and `Col`.

An example on how to use these:

```javascript
import { Container, Row, Col } from 'react-grid-system';

<Container>
  <Row>
    <Col sm={4}>
      One of three columns
    </Col>
    <Col sm={4}>
      One of three columns
{'fraction_non_alphanumeric': 0.12495238095238095, 'fraction_numerical': 0.004571428571428572, 'mean_word_length': 4.861607142857143, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3412911', 'n_tokens_mistral': 780, 'n_tokens_neox': 723, 'n_words': 262}