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.

Kunkle

Answer 1

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')
);

Dailey

Answer 2

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.

Sandi

hahaha, It's me who rant on their issue page and they change their doc a while after that. – Kunkle

lol hopefully the links will help future readers. – Sandi

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? – Suiter

Right, they elaborate on Fabric Core being legacy on another page: developer.microsoft.com/en-us/office/blogs/… And the next iteration Fluent UI Northstar uses a Grid component (!). – Sandi

My not too old rant issue. 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. – Kunkle

"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 – Zoroastrianism

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. " devblogs.microsoft.com/microsoft365dev/… – Spathic

Answer 3

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'))

Russellrusset