i want to use the fluentui grid layout in the SPFx Webpart with React as Framework.

the problem is that the grid is not working. As soon as i use it, it shows only the items under each other.

how I can solve it?

Here is my code so far:

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

enter image description here

I don't where to start. I tried different things, but it's still like working. I added the following links to my my .scss file:

@import '~office-ui-fabric-react/dist/sass/References.scss';
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
  @import 'node_modules/office-ui-fabric-react/dist/css/fabric.css';

Thanks in advance


2 Answers 2


Somehow @import 'node_modules/office-ui-fabric-react/dist/css/fabric.css'; not working.

Try to directly use: import 'office-ui-fabric-react/dist/css/fabric.css'; it worked for me.


Please check the following document to deploy your Fluentui Grid


  • I am checking to see if the problem has been resolved Jun 28, 2022 at 5:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.