fluentui-react-grid

About

React components for Fluent UI layout styles

Demo

Playground – play with the library in Storybook

Alternatives

• Fluent UI styles

Contents

• How to Install
• Components
  • Grid
  • Row
  • Col
• Example

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 include CSS styles (in the HTML header section, e.g. in index.html):

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

Getting Started

Import the default component and use it as Compound Component:

import Grid from 'fluentui-react-grid';

// ...

const App = () => {
  return (
    <Grid>
      <Grid.Row>
        <Grid.Col>Col content here...</Grid.Col>
        {/* ... */}
      </Grid.Row>
      {/* ... */}
    </Grid>
  );
};

// ...

Or import all components:

import { Grid, Row, Col } from 'fluentui-react-grid';

// ...

const App = () => {
  return (
    <Grid>
      <Row>
        <Col>Col content here...</Col>
        {/* ... */}
      </Row>
      {/* ... */}
    </Grid>
  );
};

// ...

Components

Grid

Available options

HTML div element props

By default grid order is dir="ltr" – (order from left to right). You can change it to dir="rtl" – (right to left/reversed order) or set dir="auto" to remove (it will break the layout)

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 Fluent UI class names here

Name	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>

Without Compound Components

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

    <Col sizeSm={6} sizeMd="8" sizeLg={10}>
      <DemoBlock>B</DemoBlock>
    </Col>
  </Row>
</Grid>

License

This project is licensed under the MIT License © 2020-present Jakub Biesiada