How can I use grid layout with Fluent UI React

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.

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