SharePoint Information Site > Visual Guides > Grid Guide

Responsive Grid System

The DePaul Responsive Grid System is built based on a vertical five-column layout. The widths of the columns are based on percentages and are split into four groups based on halves, thirds, quarters and fifths. Each column has 3 percent padding on the left and right, and no margins between them. Every possible layout combination of this grid system is displayed below.

Full Width and Halves

1of1
1of2
1of2

Thirds

1of3
2of3
2of3
1of3
1of3
1of3
1of3

Quarters

1of4
3of4
3of4
1of4
1of2
1of4
1of4
1of4
1of4
1of2

Fifths

4of5
1of5
4of5
1of5
2of5
3of5
3of5
2of5

Nested Grids

Utilizing nested grids exponentially expands the scope of the responsive grid system. This provides the grid system with the dynamic and flexible potential to create any piece of content that may need to be designed. A few of the many possible combinations are displayed below.

3of5

2of5
3of5

2of5


1of4

3of4

1of3
1of3
1of3

1of2

3of4
1of4

1of2

4of5
1of5

1of1

1of4
1of4
1of4
1of4
​​​​​​