Fluent UI Core - Responsive Grid
Fabric comes with a mobile-first, 12-column, responsive grid that you can use to create flexible layouts for a variety of screen sizes and device types.
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
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:
First
Second
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>
Example
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>first in code
second in code
Visibility
Some designs call for certain content to be shown or hidden depending on the screen size. You can achieve this using Fabric's responsive visibility classes. These allow you to show or hide content at a specific screen size, or across a whole range of sizes.
| Visibility class | Hides content on screen of size | ||||||
|---|---|---|---|---|---|---|---|
| SM | MD | LG | XL | XXL | XXXL | ||
| ms-hiddenSm |
Class ms-hiddenSm hides content for screen size SM |
Class ms-hiddenSm does not hide content on the screen size MD | Class ms-hiddenSm does not hide content on the screen size LG | Class ms-hiddenSm does not hide content on the screen size XL | Class ms-hiddenSm does not hide content on the screen size XXL | Class ms-hiddenSm does not hide content on the screen size XXXL | |
| ms-hiddenMd | Class ms-hiddenMd does not hide content on the screen size SM | Class ms-hiddenMd hides content for screen size MD | Class ms-hiddenMd does not hide content on the screen size LG | Class ms-hiddenMd does not hide content on the screen size XL | Class ms-hiddenMd does not hide content on the screen size XXL | Class ms-hiddenMd does not hide content on the screen size XXXL | |
| ms-hiddenMdDown | Class ms-hiddenMdDown hides content for screen size SM | Class ms-hiddenMdDown hides content for screen size MD | Class ms-hiddenMdDown does not hide content on the screen size LG | Class ms-hiddenMdDown does not hide content on the screen size XL | Class ms-hiddenMdDown does not hide content on the screen size XXL | Class ms-hiddenMdDown does not hide content on the screen size XXXL | |
| ms-hiddenMdUp | Class ms-hiddenMdUp does not hide content on the screen size SM | Class ms-hiddenMdUp hides content for screen size MD | Class ms-hiddenMdUp hides content for screen size LG | Class ms-hiddenMdUp hides content for screen size XL | Class ms-hiddenMdUp hides content for screen size XXL | Class ms-hiddenMdUp hides content for screen size XXXL | |
| ms-hiddenLg | Class ms-hiddenLg does not hide content on the screen size SM | Class ms-hiddenLg does not hide content on the screen size MD | Class ms-hiddenLg hides content for screen size LG | Class ms-hiddenLg does not hide content on the screen size XL | Class ms-hiddenLg does not hide content on the screen size XXL | Class ms-hiddenLg does not hide content on the screen size XXXL | |
| ms-hiddenLgDown | Class ms-hiddenLgDown hides content for screen size SM | Class ms-hiddenLgDown hides content for screen size MD | Class ms-hiddenLgDown hides content for screen size LG | Class ms-hiddenLgDown does not hide content on the screen size XL | Class ms-hiddenLgDown does not hide content on the screen size XXL | Class ms-hiddenLgDown does not hide content on the screen size XXXL | |
| ms-hiddenLgUp | Class ms-hiddenLgUp does not hide content on the screen size SM | Class ms-hiddenLgUp does not hide content on the screen size MD | Class ms-hiddenLgUp hides content for screen size LG | Class ms-hiddenLgUp hides content for screen size XL | Class ms-hiddenLgUp hides content for screen size XXL | Class ms-hiddenLgUp hides content for screen size XXXL | |
| ms-hiddenXl | Class ms-hiddenXl does not hide content on the screen size SM | Class ms-hiddenXl does not hide content on the screen size MD | Class ms-hiddenXl does not hide content on the screen size LG | Class ms-hiddenXl hides content for screen size XL | Class ms-hiddenXl does not hide content on the screen size XXL | Class ms-hiddenXl does not hide content on the screen size XXXL | |
| ms-hiddenXlDown | Class ms-hiddenXlDown hides content for screen size SM | Class ms-hiddenXlDown hides content for screen size MD | Class ms-hiddenXlDown hides content for screen size LG | Class ms-hiddenXlDown hides content for screen size XL | Class ms-hiddenXlDown does not hide content on the screen size XXL | Class ms-hiddenXlDown does not hide content on the screen size XXXL | |
| ms-hiddenXlUp | Class ms-hiddenXlUp does not hide content on the screen size SM | Class ms-hiddenXlUp does not hide content on the screen size MD | Class ms-hiddenXlUp does not hide content on the screen size LG | Class ms-hiddenXlUp hides content for screen size XL | Class ms-hiddenXlUp hides content for screen size XXL | Class ms-hiddenXlUp hides content for screen size XXXL | |
| ms-hiddenXxl | Class ms-hiddenXxl does not hide content on the screen size SM | Class ms-hiddenXxl does not hide content on the screen size MD | Class ms-hiddenXxl does not hide content on the screen size LG | Class ms-hiddenXxl does not hide content on the screen size XL | Class ms-hiddenXxl hides content for screen size XXL | Class ms-hiddenXxl does not hide content on the screen size XXXL | |
| ms-hiddenXxlDown | Class ms-hiddenXxlDown hides content for screen size SM | Class ms-hiddenXxlDown hides content for screen size MD | Class ms-hiddenXxlDown hides content for screen size LG | Class ms-hiddenXxlDown hides content for screen size XL | Class ms-hiddenXxlDown hides content for screen size XXL | Class ms-hiddenXxlDown does not hide content on the screen size XXXL | |
| ms-hiddenXxlUp | Class ms-hiddenXxlUp does not hide content on the screen size SM | Class ms-hiddenXxlUp does not hide content on the screen size MD | Class ms-hiddenXxlUp does not hide content on the screen size LG | Class ms-hiddenXxlUp does not hide content on the screen size XL | Class ms-hiddenXxlUp hides content for screen size XXL | Class ms-hiddenXxlUp hides content for screen size XXXL | |
| ms-hiddenXxxl | Class ms-hiddenXxxl does not hide content on the screen size SM | Class ms-hiddenXxxl does not hide content on the screen size MD | Class ms-hiddenXxxl does not hide content on the screen size LG | Class ms-hiddenXxxl does not hide content on the screen size XL | Class ms-hiddenXxxl does not hide content on the screen size XXL | Class ms-hiddenXxxl hides content for screen size XXXL | |
How to use
<div class="ms-Grid-col ms-sm12 ms-hiddenXlDown">hidden on small</div>
<div class="ms-Grid-col ms-sm12 ms-hiddenXxlUp">hidden on large up</div>The screen is XL or smaller.
The screen is XXL or larger.