# responsive-css-grid

> A super-lightweight, responsive, 8-column grid based on box-sizing

Latest version **1.0.6** (published 2018-01-16) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install responsive-css-grid
pnpm add responsive-css-grid
yarn add responsive-css-grid
bun add responsive-css-grid
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2018-01-16 |
| First published | 2016-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 53 |
| Author | Matt Smith |
| Maintainers | allthingssmitty |
| Keywords | responsive, css, grid |

## Links

- npm: https://www.npmjs.com/package/responsive-css-grid
- Repository: https://github.com/AllThingsSmitty/responsive-css-grid
- Homepage: https://github.com/allthingssmitty/responsive-css-grid
- Issues: https://github.com/AllThingsSmitty/responsive-css-grid/issues
- npm.io page: https://npm.io/package/responsive-css-grid

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2018-01-16
- 1.0.5 — 2017-03-18
- 1.0.4 — 2017-03-14
- 1.0.3 — 2016-10-21
- 1.0.2 — 2016-04-15
- 1.0.1 — 2016-04-10
- 1.0.0 — 2016-04-09

## README

# Responsive CSS Grid

[![NPM version](https://img.shields.io/npm/v/responsive-css-grid.svg?)](https://www.npmjs.com/package/responsive-css-grid)

A super-lightweight, responsive, 8-column grid based on `box-sizing`.


## Getting Started

You may install this plugin with this command:

```shell
npm install responsive-css-grid --save-dev
```

**Issues with the output should be reported on the `responsive-css-grid` [issue tracker](https://github.com/allthingssmitty/responsive-css-grid/issues).**


## Usage

```html
<div class="container">

  <div class="row">
    <div class="col-2-3"> <!-- column is 2/3 the total width -->
      Your content
    </div>
    <div class="col-1-3"> <!-- column is 1/3 the total width -->
      Your content
    </div>
  </div>

  <div class="row">
    <div class="col-1-4"> <!-- column is 1/4 the total width -->
      Your content
    </div>
    <div class="col-1-2"> <!-- column is 1/2 the total width -->
      Your content
    </div>
    <div class="col-1-4"> <!-- column is 1/4 the total width -->
      Your content
    </div>
  </div>

</div>
```


## Live Example

[Responsive CSS grid](http://codepen.io/AllThingsSmitty/full/YqEbPB).


## Browser support

The responsive CSS grid works in the latest versions of:

* Chrome
* Firefox
* Opera
* Safari
* Edge
* Internet Explorer
* iOS Safari
* Chrome for Android

The above list is non-exhaustive. This grid works perfectly with any browser that supports `box-sizing`, including IE8+.


## License

[The MIT License (MIT)](https://github.com/AllThingsSmitty/responsive-css-grid/blob/master/LICENSE)

---
_Source: https://npm.io/package/responsive-css-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._