Document Grid nesting and offset

[ryancole]

I'm looking into Fabric. I'm experienced with Bootstrap. I'm initially just trying to draw some parallels between the two.

The documentation for the grid seems a bit sparse. Perhaps Fabrics grid is not yet quite as robust as Bootstraps or maybe these items are not documented yet. So, this is why I'll ask ...

1. Does Fabric's grid support nested rows, or nested grids? How is that supposed to work in Fabric? Bootstrap allows nesting of rows.
2. Does Fabric's grid have the concept of column offsets? Bootstrap has column offsets which cut out the need for empty div elements to push columns over.

Thanks!

[mikewheaton]

Sorry for the confusion here, our layout documentation is indeed missing both of these concepts. To answer your questions:

Nested grids You can nest ms-Grid-row (with however many columns) inside of ms-Grid-col. For example:

<div class="ms-Grid">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-u-sm6">6 columns</div>
    <div class="ms-Grid-col ms-u-sm6">
      6 columns, containing another 12-column grid
      <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-u-sm4">4 columns</div>
        <div class="ms-Grid-col ms-u-sm8">8 columns</div>
      </div>
    </div>
  </div>
</div>

Column offsets You can use classes in the form of ms-u-[breakpoint]Offset[columns] to push columns to the right. For example:

ms-u-smOffset3 to push a ms-Grid-col right by three columns on small screens and up ms-u-lgOffset6 to push a ms-Grid-col right by six columns on large screens and up

I'll close this issue for now, but please respond back or open an issue if you have any other questions at all.

[ryancole]

Awesome. Thanks!

[mikewheaton]

Actually, re-opening this issue to be sure that we get the website updated with better documentation here. 😄

[mikewheaton]

I've opened an issue in the Fabric React project, which also contains the website that documents Fabric Core.

[russgove]

So, is there an example of how to do this somewhere , I'm trying to do this in an SPFX webpart. I want to display library and folder contents. Would initially show a list of libraries. you click on a library and it shows the folders, etc. Is this possible with Office-ui-fabric-react?

[russgove]

Hi, Just started working with that ms-u-smOffset# and its just what I needed, Thanks! Still, an example and some documentation is sorely needed.. Nobody knows its there! and may some helpers in the react code so I could just put "level=3" on my tag and it would add the class ms-u-smOffset3

[mikewheaton]

Re-opening the issue here. While the PR will be made in Fabric React (that repo contains the website) we're going to keep the issues alongside the project.

[russgove]

hi. looks like ms-u-smOffset# is not working anymore with latest version. Has there been an update on this,