Power Platform Iter

Fluent UI Layout System in React

There seems to be very little of no documentation on how to implement Fluent-UI’s Layout system in React application – which the official documentation seems to be lacking in here.

And it took me a while to figure this out. Below is a code that I have tried.

import React, {Component} from 'react';
import 'office-ui-fabric-react/dist/css/fabric.css';

export class GridSystemExample extends Component{
    render(){
        return (
                    <div className="ms-Grid-row" dir="ltr">
                        <div className="ms-Grid-row"> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md1 block">1</div> 
                        </div> 
                        <div className="ms-Grid-row"> 
                            <div className="ms-Grid-col ms-sm6 ms-md2 block">2</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md2 block">2</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md2 block">2</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md2 block">2</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md2 block">2</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md2 block">2</div> 
                        </div> 
                        <div className="ms-Grid-row"> 
                            <div className="ms-Grid-col ms-sm6 ms-md3 block">3</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md3 block">3</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md3 block">3</div> 
                            <div className="ms-Grid-col ms-sm6 ms-md3 block">3</div> 
                        </div> 
                        <div className="ms-Grid-row"> 
                            <div className="ms-Grid-col ms-sm12 ms-md4 block">4</div> 
                            <div className="ms-Grid-col ms-sm12 ms-md4 block">4</div> 
                            <div className="ms-Grid-col ms-sm12 ms-md4 block">4</div> 
                        </div> 
                        <div className="ms-Grid-row"> 
                            <div className="ms-Grid-col ms-sm12 ms-md6 block">6</div> 
                            <div className="ms-Grid-col ms-sm12 ms-md6 block">6</div> 
                        </div> 
                        <div className="ms-Grid-row"> 
                            <div className="ms-Grid-col ms-sm12 ms-md12 block">12</div> 
                        </div> 
                    </div> 

        );
    }
}

Ensure that you import the CSS and implement the dir=”ltr” – which i think, the CSS is dependent on.

You only need to install @fluentui/react

npm i @fluentui/react

Below is the output of the above code.

Best of luck!

Rolly

, ,

Leave a comment