# react-styled-flexboxgrid > Grid system based on styled-components and flexbox for React Latest version **3.3.0** (published 2024-04-02) · MIT license · 0 weekly downloads ## Install ```sh npm install react-styled-flexboxgrid pnpm add react-styled-flexboxgrid yarn add react-styled-flexboxgrid bun add react-styled-flexboxgrid ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.3.0 | | Published | 2024-04-02 | | First published | 2017-01-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 91.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 552 | | Author | Loic Mahieu | | Maintainers | loicmahieu | | Keywords | react, grid, flexbox, styled, styled-components | ## Links - npm: https://www.npmjs.com/package/react-styled-flexboxgrid - Repository: https://github.com/LoicMahieu/react-styled-flexboxgrid - Issues: https://github.com/LoicMahieu/react-styled-flexboxgrid/issues - npm.io page: https://npm.io/package/react-styled-flexboxgrid ## Dependencies (1) - [lodash.isinteger](https://npm.io/package/lodash.isinteger.md) ^4.0.4 ## 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 - 3.3.0 (latest) — 2024-04-02 - 3.2.1 — 2020-02-06 - 3.2.0 — 2020-02-06 - 3.1.0 — 2019-02-22 - 3.0.0 — 2018-12-12 - 2.6.0 — 2018-09-14 - 2.5.0 — 2018-09-14 - 2.4.0 — 2018-06-14 - 2.3.0 — 2018-06-14 - 2.2.0 — 2018-02-12 - 2.1.1 — 2017-10-30 - 2.1.0 — 2017-10-11 - 2.0.3 — 2017-06-20 - 2.0.2 — 2017-06-19 - 2.0.1 — 2017-06-12 - … 7 more at https://npm.io/package/react-styled-flexboxgrid/versions ## README # react-styled-flexboxgrid [![npm version](https://badge.fury.io/js/react-styled-flexboxgrid.svg)](https://badge.fury.io/js/react-styled-flexboxgrid) [![Build Status](https://travis-ci.org/LoicMahieu/react-styled-flexboxgrid.svg?branch=master)](https://travis-ci.org/LoicMahieu/react-styled-flexboxgrid) [![NPM Status](http://img.shields.io/npm/dm/react-styled-flexboxgrid.svg?style=flat-square)](https://www.npmjs.org/package/react-styled-flexboxgrid) [![js-standard-style](https://img.shields.io/badge/lint-standard-green.svg)](http://standardjs.com) Set of React components that implement [`flexboxgrid.css`](https://github.com/kristoferjoseph/flexboxgrid) but with [`styled-components`](https://github.com/styled-components/styled-components)/[`emotion`](https://github.com/emotion-js/emotion). Furthermore, it allows to customize grid configuration like gutter width... Highly inspired by the excellent [`react-flexbox-grid`](https://github.com/roylee0704/react-flexbox-grid) which the API is nearly the same than this module. [**Demo**](https://loicmahieu.github.io/react-styled-flexboxgrid/demo/index.html) ## Usage ### Installation ``` npm i -S react-styled-flexboxgrid ``` `react-styled-flexboxgrid` depends on 2 **peer** dependencies: - `react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0` - `prop-types@^15.0.0-0` - `styled-components@2` You should install them in your project. ### Basic ```JSX import React from 'react' import {Grid, Col, Row} from 'react-styled-flexboxgrid' const App = props => Hello, world! ``` ### Grid The `` component is optional and can help to wrap children in a fixed/fluid container. Use the configuration `container` for fixed width value. ##### Props - `fluid` _(Boolean)_: Create a responsive fixed width container or a full width container, spanning the entire width of your viewport. Default: false ### Row ##### Props - `reverse` _(Boolean)_: Use `flex-direction: row-reverse`. Default: false - `start` - `center` - `end` - `top` - `middle` - `bottom` - `around` - `between` - `first` - `last` _(String(xs|sm|md|lg)_: Align elements to the start or end of row as well as the top, bottom, or center of a column. ### Col ##### Props - `reverse` _(Boolean)_: Use `flex-direction: column-reverse`. Default: false - `xs` - `sm` - `md` - `lg` _(Boolean|Integer)_: * When `true`, enable auto sizing column. * When `false`, hide colomn for the breakpoint. * When `integer` value, it specify the column size on the grid. (1 to 12) - `xsOffset` - `smOffset` - `mdOffset` - `lgOffset` _(Integer)_: Offset the column. ### Configuration The grid use same defaults than [`flexboxgrid.css`](https://github.com/kristoferjoseph/flexboxgrid). You can customize values using [``](https://github.com/styled-components/styled-components#theming) component from styled-components. `react-styled-flexboxgrid` will looks at the `flexboxgrid` property in the theme. ```JSX import React from 'react' import {ThemeProvider} from 'styled-components' import {Grid, Col, Row} from 'react-styled-flexboxgrid' const theme = { flexboxgrid: { // Defaults gridSize: 12, // columns gutterWidth: 1, // rem outerMargin: 2, // rem mediaQuery: 'only screen', container: { sm: 46, // rem md: 61, // rem lg: 76 // rem }, breakpoints: { xs: 0, // em sm: 48, // em md: 64, // em lg: 75 // em } } } const App = props => Hello, world! ``` ## Use with Emotion To use react-styled-flexboxgrid with emotion, import from 'react-styled-flexboxgrid/emotion': ```jsx import { Grid, Col, Row } from 'react-styled-flexboxgrid/emotion' ``` ## Related projects - [styled-components](https://github.com/styled-components/styled-components) - [hedron](https://github.com/JSBros/hedron) ## License MIT --- _Source: https://npm.io/package/react-styled-flexboxgrid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._