How can I use grid layout with Fluent UI React

Question

After I install @fluentui/react, I try to use grid like this doc https://developer.microsoft.com/en-us/fluentui#/styles/web/layout

ReactDOM.render(
  <React.StrictMode>
      <div className="ms-Grid" dir="ltr">
          <div className="ms-Grid-row">
              <div className="ms-Grid-col ms-sm4 ms-xl4">A</div>
              <div className="ms-Grid-col ms-sm8 ms-xl8">B</div>
          </div>
      </div>
  </React.StrictMode>,
  document.getElementById('root')
);

But It does not work,other control components work just fine. Did I miss something?

Their docs only mention npm package.

score 9 · Accepted Answer · edited May 08 '20 at 21:56

You can try like that.

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

ReactDOM.render(
  <React.StrictMode>
      <div className="ms-Grid" dir="ltr">
          <div className="ms-Grid-row">
              <div className="ms-Grid-col ms-sm4 ms-xl4">A</div>
              <div className="ms-Grid-col ms-sm8 ms-xl8">B</div>
          </div>
      </div>
  </React.StrictMode>,
  document.getElementById('root')
);

Christophe · Answer 2 · 2021-03-06T04:46:03.387

7

The documentation makes it clear that grid is a legacy component and not meant to be used with Fluent UI React.

You can use CSS Grid directly. For an example in the context of Microsoft 365, check out this blog post.

[Update] Note that Fluent UI Northstar (@fluentui/react-northstar) has a Grid component.

edited Mar 06 '21 at 04:46

answered Dec 28 '20 at 21:33

Christophe

27,383
28
97
140

1

hahaha, It's me who rant on their issue page and they change their doc a while after that. – Persk Jan 14 '21 at 14:50
lol hopefully the links will help future readers. – Christophe Jan 14 '21 at 20:30
1

Hm, the doc says only the `ms-Grid` classes only available if you are using Fabric Core, it doesn't mention that it's legacy, or am I missing something? – Katona Mar 05 '21 at 13:08
1

Right, they elaborate on Fabric Core being legacy on another page: https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/ And the next iteration Fluent UI Northstar uses a Grid component (!). – Christophe Mar 06 '21 at 04:37
My not too old rant issue. https://github.com/microsoft/fluentui/issues/13200 if anyone interest. Most of their answer is a direction not really how things go but still help clear some confusion. – Persk Mar 12 '21 at 04:13
"Note that this grid is only available via Fabric Core CSS. If you're not using Fabric Core, Fluent UI React's Stack can cover some of the same use cases, or you can use CSS grid." from [docs](https://developer.microsoft.com/en-us/fluentui#/styles/web/layout) – ykaragol Nov 21 '21 at 06:59
Devblog says this: "Is the current version of UI Fabric still supported? Yes. Nothing is changing in our level of support to the community for the library. " https://devblogs.microsoft.com/microsoft365dev/ui-fabric-is-evolving-into-fluent-ui/ – Burre Ifort Jul 01 '22 at 06:08

rishabh sethi · Answer 3 · 2021-08-07T18:20:56.957

Stack provides the grid layout for the react-fluent.

From documentation:

A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.

Example:

const { DefaultPalette, Slider, Stack, IStackStyles, IStackTokens, ThemeProvider, initializeIcons } = window.FluentUIReact;

// Initialize icons in case this example uses them
initializeIcons();

// Non-mutating styles definition
const itemStyles: React.CSSProperties = {
  alignItems: 'center',
  background: DefaultPalette.themePrimary,
  color: DefaultPalette.white,
  display: 'flex',
  height: 50,
  justifyContent: 'center',
  width: 50,
};

// Tokens definition
const sectionStackTokens: IStackTokens = { childrenGap: 10 };
const wrapStackTokens: IStackTokens = { childrenGap: 30 };

const HorizontalStackWrapExample: React.FunctionComponent = () => {
  const [stackWidth, setStackWidth] = React.useState<number>(100);
  // Mutating styles definition
  const stackStyles: IStackStyles = {
    root: {
      background: DefaultPalette.themeTertiary,
      width: `${stackWidth}%`,
    },
  };

  return (
    <Stack tokens={sectionStackTokens}>
      <Slider
        label="Change the stack width to see how child items wrap onto multiple rows:"
        min={1}
        max={100}
        step={1}
        defaultValue={100}
        showValue={true}
        onChange={setStackWidth}
      />

      <Stack horizontal wrap styles={stackStyles} tokens={wrapStackTokens}>
        <span style={itemStyles}>1</span>
        <span style={itemStyles}>2</span>
        <span style={itemStyles}>3</span>
        <span style={itemStyles}>4</span>
        <span style={itemStyles}>5</span>
        <span style={itemStyles}>6</span>
        <span style={itemStyles}>7</span>
        <span style={itemStyles}>8</span>
        <span style={itemStyles}>9</span>
        <span style={itemStyles}>10</span>
      </Stack>
    </Stack>
  );
};

const HorizontalStackWrapExampleWrapper = () => <ThemeProvider><HorizontalStackWrapExample /></ThemeProvider>;
ReactDOM.render(<HorizontalStackWrapExampleWrapper />, document.getElementById('content'))

How can I use grid layout with Fluent UI React

3 Answers3