# styled-css-grid > A tiny CSS grid layout for React, built with styled-components Latest version **1.3.0** (published 2024-08-07) · MIT license · 0 weekly downloads ## Install ```sh npm install styled-css-grid pnpm add styled-css-grid yarn add styled-css-grid bun add styled-css-grid ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.0 | | Published | 2024-08-07 | | First published | 2017-07-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 33.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 619 | | Author | Lucas Azzola | | Maintainers | azz | | Keywords | grid, css, react, styled-components | ## Links - npm: https://www.npmjs.com/package/styled-css-grid - Repository: https://github.com/azz/styled-css-grid - Homepage: https://styled-css-grid.js.org - Issues: https://github.com/azz/styled-css-grid/issues - npm.io page: https://npm.io/package/styled-css-grid ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.6.0 ## 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.3.0 (latest) — 2024-08-07 - 1.2.1 — 2019-01-24 - 1.2.0 — 2018-12-17 - 1.1.1 — 2018-10-18 - 1.1.0 — 2018-09-07 - 1.0.0 — 2018-08-17 - 0.11.2 — 2018-08-14 - 0.11.1 — 2018-08-11 - 0.11.0 — 2018-05-31 - 0.10.0 — 2018-05-31 - 0.9.0 — 2018-05-18 - 0.8.2 — 2018-01-27 - 0.8.1 — 2018-01-10 - 0.8.0 — 2017-12-29 - 0.7.0 — 2017-08-06 - … 8 more at https://npm.io/package/styled-css-grid/versions ## README # `styled-css-grid 🍱` [![Travis](https://img.shields.io/travis/azz/styled-css-grid.svg?style=flat-square)](https://travis-ci.org/azz/styled-css-grid) [![Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![npm](https://img.shields.io/npm/v/styled-css-grid.svg?style=flat-square)](https://npmjs.org/styled-css-grid) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release) [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE) [![JS.ORG](https://img.shields.io/badge/js.org-dns-ffb400.svg?style=flat-square)](http://js.org) > A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅. ## examples See the **[website]**. ## installation Install React and [styled-components], then: ```bash $ yarn add styled-css-grid ``` ## usage ```jsx import React from "react"; import { Grid, Cell } from "styled-css-grid"; const MyGrid = () => ( foo bar baz ); ``` ## api ### `Grid` Wrap your cells in `Grid`. Pretty simple. Props: * `columns`: The [grid-template-columns] CSS property. When a number is passed it is a shorthand to specify the number of columns. Default is `12`. * `gap`: The [grid-gap] CSS property. Default is `"8px"`. * `columnGap`: The [column-gap] CSS property. Not provided by default. * `rowGap`: The [row-gap] CSS property. Not provided by default. * `minRowHeight`: Minimum height of each row. Default is `"20px"`. * `height`: The [height] CSS property. Default is `"auto"`. * `flow`: The [grid-auto-flow] CSS property. Default is `"row"`. * `rows`: The [grid-template-rows] CSS property. When a number is passed it is a shorthand to specify the number of rows. Not provided by default. * `areas`: The [grid-template-areas] CSS property. Pass an array of strings, e.g. `["a a", "b c"]`. Not provided by default. * `justifyContent`: The [justify-content] CSS property. Not provided by default. * `alignContent`: The [align-content] CSS property. Not provided by default. ### `Cell` A cell. Not too much to say... Props: * `width`: Cell width in units, default is `1`. * `height`: Cell height in units, default is `1`. * `left`: The [grid-column-start] CSS property. Not provided by default. * `top`: The [grid-row-start] CSS property. Not provided by default. * `middle`: Vertically align the contents of the cell. Default is `false`. * `center`: Horizontally align the text contents of the cell. Default is `false`. * `area`: The [grid-area] CSS property. Not provided by default. ## browser support _[caniuse]_ You can use CSS grid in production _today_ **if** you don't need to support IE and Edge, or you're building tooling or internal sites where you only need to support one browser. You can use CSS grid _soon_ if you have to support the latest version of modern browsers. Edge 16 will implement the latest CSS grid spec. ![Can I use?](website/caniuse.png) [website]: https://styled-css-grid.js.org/ [CSS grid]: https://mdn.io/CSS_Grid_Layout [styled-components]: https://github.com/styled-components/styled-components [grid-auto-flow]: https://mdn.io/grid-auto-flow [grid-row-start]: https://mdn.io/grid-row-start [grid-column-start]: https://mdn.io/grid-column-start [grid-template-columns]: https://mdn.io/grid-template-columns [grid-template-rows]: https://mdn.io/grid-template-rows [grid-template-areas]: https://mdn.io/grid-template-areas [grid-area]: https://mdn.io/grid-area [height]: https://mdn.io/css-height [grid-gap]: https://mdn.io/grid-gap [column-gap]: https://mdn.io/column-gap [row-gap]: https://mdn.io/row-gap [justify-content]: https://mdn.io/justify-content [align-content]: https://mdn.io/align-content [caniuse]: http://caniuse.com/#feat=css-grid --- _Source: https://npm.io/package/styled-css-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._