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.

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

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.