Picchu

Grid

Guidance

The Microsoft.com grid is the column based foundation that all content aligns to. It allows up to 24 columns with a max grid width of 1600px. There are four (4) main breakpoints which control column density, allowing for a single page design to be rendered properly on a multitude of devices:

  • 540px
  • 768px
  • 1084px
  • 1400px

Stage & page padding

The stage holds the grid centered. Any content aligned to the grid is on the stage. The page padding (space outside the stage to the left and right) adjusts width per breakpoint.

Page padding behavior

  • Below 540 it is 12px left and 12px right
  • From 540-767 it is 24px
  • From 768-1600 it is 5% the viewport
  • At 1600 the stage locks and page padding grows to keep stage centered

Gutters

Gutters are the space between columns. The default gutter size is 2% of the viewport. For layouts that require columns without gutters, you may add the optional class .zero-margin to either your containing .ms-grid or .ms-row element.

Demo

See the Pen Grid Demo by Microsoft.com (@microsoft) on CodePen.

Modifications

With the use of CSS classes the grid can be customized

Full viewport

Optionally, you may override the default page-padding recommended for the grid to implement a full viewport layout. This may be achieved by adding the class .full to your .ms-grid element.

See the Pen Grid Demo - Full Viewport by Microsoft.com (@microsoft) on CodePen.

Alternate gutter sizes

By default, the gutter width is a flexible 2% of the viewport. The grid can also support fluid, fixed, and zero/no gutter options. You may add the following classes to your .ms-grid element to effect the entire grid, or to just a single .ms-row element to effect only the containing columns.

  • .zero-margin removes gutters
  • .fixed adds 4px fixed gutters
  • .fixed-small adds step-up gutter sizes of 4px mobile, 12px tablet, and 24px desktop
  • .fixed-large adds step-up gutter sizes of 8px mobile, 24px tablet, and 48px desktop

See the Pen Grid Demo - Alternate Gutters by Microsoft.com (@microsoft) on CodePen.

Manual column spanning

Manual column span class overrides are supported for all column counts and all breakpoints. This allows for the fine tuning of column breaks at specified viewport breakpoints. Any column class name can be appended with the following breakpoint labels to create a class override:

  • mf: < 320px
  • xs: > 320px
  • s: > 540px
  • m: > 768px
  • l: > 1084px
  • xl: > 1400px
  • nb: forces default size across all breakpoints.

For example, to make a column 12 of 24 at a 768px viewport (tablet) and 20 of 24 above 768px (desktop), your column classes would look like .s-col-12-24 and .m-col-20-24

See the Pen Grid Demo - Alternate Gutters by Microsoft.com (@microsoft) on CodePen.

Column offsets

Columns will automatically start at the left edge of the stage. Use offsets to define the number of columns to push the content in. This can be used to make the stage appear narrower, or to create negative space between columns.

The naming convention used for offset classes is: .{breakpoint}-col-{total number of cols}-offset-{column offset}

For example, to create a column 2/3 the stage width, but give it an offset of 1/6 of the stage width on a large viewport, use class="col-4-6 l-col-6-offset-1".

See the Pen Grid Demo - Column Offsets by Microsoft.com (@microsoft) on CodePen.

Grid nesting

Sometimes a clean and simply divisible column row won't accomodate a complex page design. Often, nesting one grid in another may offer a solution.

Nest your new grid inside your column starting with the .ms-row element. An .ms-grid element should never be nested inside another .ms-grid element!

See the Pen Grid Demo - Nested Grids by Microsoft.com (@microsoft) on CodePen.

Column reordering

When columns stack due to breakpoint change, the leftmost column will be on top. Column reordering gives you the option to change this, by "pushing" and "pulling" elements to snap to a column different order. It is similar to offset, but differs to allow elements to move around each other, rather than statically pushing all the subsequent columns.

The naming convention used for push and pull classes are: .{breakpoint}-col-{total number of cols}-push-{column offset} and .{breakpoint}-col-{total number of cols}-pull-{column offset}

For example, to swap columns in a two column row at a medium viewport, push the first column over with .m-col-2-push-1 and pull the second back with .m-col-2-pull-1.

See the Pen Grid Demo - Column Reordering by Microsoft.com (@microsoft) on CodePen.

Hiding and Showing

Although not a best practice, if your design absolutely needs to have hidden content at a certain breakpoint range, it can be achieved with the hide and show column classes.

The naming convention used for hide and show classes are: .hide-{breakpoint} and .show-{breakpoint}

For example, to hide a column on mobile, but to show it on tablet sizes and up, you would apply the classes .hide-s and .show-m to your column.

See the Pen Grid Demo - Hide and Show by Microsoft.com (@microsoft) on CodePen.

Resources