# fluentui-react-grid > React components for Fluent UI layout styles Latest version **1.0.0** (published 2020-11-16) · MIT license · 0 weekly downloads ## Install ```sh npm install fluentui-react-grid pnpm add fluentui-react-grid yarn add fluentui-react-grid bun add fluentui-react-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.0.0 | | Published | 2020-11-16 | | First published | 2020-11-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 40.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Jakub Biesiada | | Maintainers | jbiesiada | | Keywords | grid, row, col, react, components, fluent, microsoft, styles, layout | ## Links - npm: https://www.npmjs.com/package/fluentui-react-grid - Repository: https://github.com/JB1905/fluentui-react-grid - Homepage: https://github.com/JB1905/fluentui-react-grid#readme - Issues: https://github.com/JB1905/fluentui-react-grid/issues - npm.io page: https://npm.io/package/fluentui-react-grid ## Dependencies (1) - [classnames](https://npm.io/package/classnames.md) ^2.2.6 ## 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.0 (latest) — 2020-11-16 - 1.0.0-beta.1 — 2020-11-13 - 0.0.0 — 2020-11-01 ## README # [fluentui-react-grid](https://github.com/JB1905/fluentui-react-grid) [![NPM version](https://img.shields.io/npm/v/fluentui-react-grid?style=flat-square)](https://www.npmjs.com/package/fluentui-react-grid) [![NPM downloads](https://img.shields.io/npm/dm/fluentui-react-grid?style=flat-square)](https://www.npmjs.com/package/fluentui-react-grid) [![NPM license](https://img.shields.io/npm/l/fluentui-react-grid?style=flat-square)](https://www.npmjs.com/package/fluentui-react-grid) [![Codecov](https://img.shields.io/codecov/c/github/JB1905/fluentui-react-grid?style=flat-square)](https://codecov.io/gh/JB1905/fluentui-react-grid) [![Travis](https://img.shields.io/travis/JB1905/fluentui-react-grid/master?style=flat-square)](https://travis-ci.org/JB1905/fluentui-react-grid) [![Bundle size](https://img.shields.io/bundlephobia/min/fluentui-react-grid?style=flat-square)](https://bundlephobia.com/result?p=fluentui-react-grid) ## About React components for Fluent UI layout styles ### Alternatives - [Fluent UI styles](https://developer.microsoft.com/en-us/fluentui#/styles/web/layout) ## Contents - [Demo](#demo) - [How to Install](#how-to-install) - [Components](#components) - [Grid](#grid) - [Row](#row) - [Col](#col) - [Example](#example) ## Demo [**Playground – play with library in Storybook**](https://jb1905.github.io/fluentui-react-grid/) ## How to Install First, install the library in your project by npm: ```sh $ npm install fluentui-react-grid ``` Or Yarn: ```sh $ yarn add fluentui-react-grid ``` You also need to include CSS styles (in HTML head section e.g.: in index.html file): ```html ``` ## Components ### Grid #### Available options HTML div element props *You need to add `dir="ltr"` – (order from left to right) or `dir="rtl"` – (right to left/reversed order) for correct grid positioning* ### Row #### Available options HTML div element props ### Col #### Available options HTML div element props and dedicated params based on Fluent UI class names [Check corresponding Fulent UI class names here](https://developer.microsoft.com/en-us/fluentui#/styles/web/layout) | Param | Type | | --------------- | ------------------------------- | | `sizeSm` | number or string (between 1-12) | | `sizeMd` | number or string (between 1-12) | | `sizeLg` | number or string (between 1-12) | | `sizeXl` | number or string (between 1-12) | | `sizeXxl` | number or string (between 1-12) | | `sizeXxxl` | number or string (between 1-12) | | `smPush` | number or string (between 1-12) | | `mdPush` | number or string (between 1-12) | | `lgPush` | number or string (between 1-12) | | `xlPush` | number or string (between 1-12) | | `xxlPush` | number or string (between 1-12) | | `xxxlPush` | number or string (between 1-12) | | `smPull` | number or string (between 1-12) | | `mdPull` | number or string (between 1-12) | | `lgPull` | number or string (between 1-12) | | `xlPull` | number or string (between 1-12) | | `xxlPull` | number or string (between 1-12) | | `xxxlPull` | number or string (between 1-12) | | `hiddenSm` | boolean | | `hiddenMd` | boolean | | `hiddenMdDown` | boolean | | `hiddenMdUp` | boolean | | `hiddenLg` | boolean | | `hiddenLgDown` | boolean | | `hiddenLgUp` | boolean | | `hiddenXl` | boolean | | `hiddenXlDown` | boolean | | `hiddenXlUp` | boolean | | `hiddenXxl` | boolean | | `hiddenXxlDown` | boolean | | `hiddenXxlUp` | boolean | | `hiddenXxxl` | boolean | ## Example ### Basics ```jsx A B ``` ### Inheritance ```jsx Example ``` ### Push and pull ```jsx First in code Second in code ``` ### Visibility ```jsx Visible on smaller screens Visible on larger screens ``` ## License This project is licensed under the MIT License © 2020-present Jakub Biesiada --- _Source: https://npm.io/package/fluentui-react-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._