For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Grid System

The content area in Drexel websites is made up of a grid system. The grid system is set up to be responsive with an automatic variable width optimized for different devices as outlined on the Responsive Web Design page.

  1. A 24-column grid spans the full content area
  2. If a grid of 24 is chosen, the content will span the entire range
  3. If a grid of 17 is chosen, the content will span the content area width until it reaches that many grid units

Containers for grid units

Classes specified on content containers will automatically become responsive.

Example

Containers are given classes that designate grid units (i.e. class="grid-6" or class="grid-10").
This will initiate the container to fill an area as wide as 6 grid units.

  1. In the left column, a grid of 17 was specified, so 17 grid units are utilized
  2. In the right column, a grid of 6 was specified, so 6 grid units are utilized

Refer to the Advanced Class List for details.

Example

1. A 24-column grid spans the full content area

2. If a grid of 24 is chosen, the content will span the entire range

3. If a grid of 17 is chosen, the content will span the content area 17 grid units

1. A grid of 17 was specified so 17 grid units are utilized for the left column
2. A grid of 6 was specified so 6 grid units are utilized for the right column