Grid Layout


Fabric comes with a 12-column responsive grid for flexible layouts and all screen sizes


<div class="ms-Grid"> 
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
    <div class="ms-Grid-col ms-sm6 ms-md1 block">1</div>
  </div>
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm6 ms-md2 block">2</div>
    <div class="ms-Grid-col ms-sm6 ms-md2 block">2</div>
    <div class="ms-Grid-col ms-sm6 ms-md2 block">2</div>
    <div class="ms-Grid-col ms-sm6 ms-md2 block">2</div>
    <div class="ms-Grid-col ms-sm6 ms-md2 block">2</div>
    <div class="ms-Grid-col ms-sm6 ms-md2 block">2</div>
  </div>
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm6 ms-md3 block">3</div>
    <div class="ms-Grid-col ms-sm6 ms-md3 block">3</div>
    <div class="ms-Grid-col ms-sm6 ms-md3 block">3</div>
    <div class="ms-Grid-col ms-sm6 ms-md3 block">3</div>
  </div>
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm12 ms-md4 block">4</div>
    <div class="ms-Grid-col ms-sm12 ms-md4 block">4</div>
    <div class="ms-Grid-col ms-sm12 ms-md4 block">4</div>
  </div>
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm12 ms-md6 block">6</div>
    <div class="ms-Grid-col ms-sm12 ms-md6 block">6</div>
  </div>
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm12 ms-md12 block">12</div>
  </div>
</div>


Styles

ms-sm6
ms-md2



Push/Pull Classes

ms-u-smPush6
ms-u-smPull3
ms-u-lgPush0
ms-u-lgPull0



Hidden Classes

ms-u-hiddenSm
ms-u-hiddenMdDown



Offset Classes

ms-u-smOffset3
ms-u-lgOffset2




© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext