How to use
A grid (ms-Grid) can contain multiple rows (ms-Grid-row), each of which has one or more columns (ms-Grid-col). Utility classes (ms-sm6) specify how large each column should be on small, medium, and large devices. The columns in a row should add up to 12 for each device size.
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">First</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">Second</div>
</div>
</div>
Would result in:
Inheritance
Because Fabric is mobile-first, any layout defined for small screens is automatically inherited by medium and large screens. The small size utilities (ms-sm6) are required. If you want to change the layout on larger screens, you can apply the other utility classes.
Try this out! On a large screen, the Example block will be smaller. Try shrinking your browser window – the Example block will take up the entire width of the screen.
How to use
<div class="ms-Grid-col ms-sm12 ms-lg4">Example</div>
Push and pull
You might want your column source order to differ from the display order, or to change the column display order based on the screen size. The push and pull utilities make this possible. Push moves a column to the right; pull moves it to the left.
How to use
<div class="ms-Grid-col ms-sm4 ms-smPush8">first in code</div>
<div class="ms-Grid-col ms-sm8 ms-smPull4">second in code</div>