Package Exports

fluentui-react-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fluentui-react-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

fluentui-react-grid

About

React components for Fluent UI layout styles

Alternatives

Fluent UI styles

Demo
How to Install
Components
- Grid
- Row
- Col
Example

Demo

Playground – play with library in Storybook

How to Install

First, install the library in your project by npm:

$ npm install fluentui-react-grid

Or Yarn:

$ yarn add fluentui-react-grid

You also need to add CSS styles:

<link
  rel="stylesheet"
  href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
/>

Components

Grid

Available options

HTML div element props

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

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

<Grid>
  <Grid.Row>
    <Grid.Col sizeSm={6} sizeMd={4} sizeLg={2}>
      A
    </Grid.Col>

    <Grid.Col sizeSm={6} sizeMd={6} sizeLg={10}>
      B
    </Grid.Col>
  </Grid.Row>
</Grid>

Inheritance

<Grid>
  <Grid.Row>
    <Grid.Col sizeSm={12} sizeLg={4}>
      Example
    </Grid.Col>
  </Grid.Row>
</Grid>

Push and pull

<Grid>
  <Grid.Row>
    <Grid.Col sizeSm={4} smPush={8}>
      First in code
    </Grid.Col>

    <Grid.Col sizeSm={8} smPull={4}>
      Second in code
    </Grid.Col>
  </Grid.Row>
</Grid>

Visibility

<Grid>
  <Grid.Row>
    <Grid.Col sizeSm={12} hiddenXxlUp>
      Visible on smaller screens
    </Grid.Col>

    <Grid.Col sizeSm={12} hiddenXlDown>
      Visible on larger screens
    </Grid.Col>
  </Grid.Row>
</Grid>

JSPM