msdotcom grid

View on GitHub

Notes

  • There is no vertical spacing on the grid by default. We have added vertical spacing on rows here only for demo purposes to visually space out the color of different rows
  • Numbering next to some headers just added to show layout changes for LTR vs. RTL
  • The text on the color boxes is showing the classes that are currently present on that column
1/1

Header one

1/2

Header two 1

2/2

Header two 2

1/2

Header two (No break) 1

2/2

Header two (No break) 2

1/3

Header three 1

2/3

Header three 2

3/3

Header three 3

1/3

Header three (no break) 1

3/3

Header three (no break) 2

1/4

Header four 1

2/4

Header four 2

3/4

Header four 3

4/4

Header four 4

1/4

Header four 1

2/4

Header four 2

3/4

Header four 3

4/4

Header four 4

2/4

Header four

3/4

Header four

4/4

Header four

3/4

Header four

4/4

Header four

3/4

Header four

4/4

Header four

1/5
2/5
3/5
4/5
5/5
2/5
3/5
4/5
5/5
1/5
2/5
5/5
4/5
5/5
1/6
2/6
3/6
4/6
5/6
6/6
2/6
3/6
4/6
5/6
6/6
3/6
4/6
5/6
6/6
4/6
5/6
6/6
4/6
5/6
6/6
4/6
6/6
1/8
2/8
3/8
4/8
5/8
6/8
7/8
8/8
2/8
3/8
4/8
5/8
6/8
7/8
8/8
4/8
5/8
6/8
7/8
8/8
6/8
7/8
8/8
6/8
8/8
6/8
7/8
8/8
6/8
8/8
1/12
2/12
3/12
4/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
12/12
1/12
3/12
4/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
12/12
1/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
12/12
3/12
4/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
12/12
1/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
12/12
1/12

Manual column spanning (supported on all column counts)

Nesting

Offsets

Column Ordering (push/pull)

Horizontally centered columns using flexbox (.hc or .horizontally-centered class on row)

Vertically centered columns using flexbox (.vc or .vertically-centered class on row)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nisi aliquid consectetur repellat totam voluptatum, id ab doloribus, incidunt facilis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, debitis.

Centered columns (.centered class on row or individual columns)

Hiding/showing content

RTL Support

1/3

Column 1

3/3

Column 2

1/4

Column 1

2/4

Column 2

3/4

Column 3

4/4

Column 4

IE8 Support

Without doing anything, IE8 will show the mobile first view. If that is not acceptable for your project, full IE8 support is supported by adding Respond.js to your project will allow it to behave as it does in modern browsers. Remember that if you're using any HTML5 elements (like section), you'll also want to add the Html5Shiv. Include this JS in the head of your HTML, putting in the conditional comment below will only serve it to browsers below IE9.

                                <head>
                                ...

                                <!--[if lt IE 9]>
                                <script src="/pathto/html5shiv.js"></script>
                                <script src="/pathto/respond.js"></script>
                                <![endif]-->
                                </head>
                            

Other examples of possible behaviors

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Media queries and column breakdown chart

Columns < 320px (mf) > 320px (vp1) XS > 540px (vp2) S > 768px (vp3) M > 1084px (vp4) L > 1400px (vp5) XL
1 1 1 1 1 1 1
2 1 1 1 2 2 2
3 1 1 3 3 3 3
4 1 1 2 4 4 4
5 1 1 1 5 5 5
6 1 1 2 3 6 6
8 2 2 2 4 8 8
12 2 2 4 4 12 12
24 6 6 12 24 24 24

Column spanning "automagically" supported

Columns Spans
1 1
2 1
3 1, 2
4 1, 2, 3
5 1, 2, 3, 4
6 1, 2, 3, 4
8 1, 2, 4, 6
12 1, 2, 4
24 1, 6, 12