Fabric UI Core Grid Layout DOES NOT WORK

user_758119 0
Viewed 3580

I have a very simple HTML page that in summary includes the Fabric UI CSS file and has a body (body.ms-Fabric) with 

<div class="ms-Grid">
    <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-sm12 ms-u-md4 ms-lg2">
            Column 1
        </div>
        <div class="ms-Grid-col ms-sm12 ms-md8 ms-lg10">
            Column 2
        </div>
    </div>
</div>

but is displaying two rows instead of the expected two columns

What am I doing wrong?

Am I missing any other CSS include or class?

Thanks

office-ui-fabric
2 Answers

It does work. :) They seem to have forgotten to update their guide when they included rtl support. Simply add dir="ltr" to the html tag or at least the div parent to .ms-Grid-col

<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.3.0/css/fabric.min.css" rel="stylesheet" />
<div class="ms-Fabric" dir="ltr">

  <div class="ms-Grid">
    <div class="ms-Grid-row">
      <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
      <div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
    </div>
  </div>
</div>

user_2899430
Related