Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

Grids

The grid content type consists of boxes displayed in a uniform layout across a page. Grids provide an attractive and efficient way to lay out content, giving you more control over the information you are presenting.

  • Four grid types are available to accommodate a wide range of content
  • All grids span the full width of a page
  • A grid may contain 2, 3 or 4 columns and an unlimited number of rows*
    *News RSS grids limit boxes to 30 which does limit overall row count.
  • At least one box must be populated with content, no maximum
  • Many background colors allow for customization and visual interest
Yes. Not only can you have multiple grids on a page, each grid can have its own type, number of columns and background color. However, try to use grids strategically and avoid over using them. Having a lot of grids on a page may affect load times.

CMS pages are fully responsive (i.e., mobile-friendly) so your grids will adapt to the devices your website visitors are using.

Tip: Learn a trick for seeing how your website looks on various display sizes.

For a single column of information, use the Wide content type for a full-width content area.

Add a Grid

  1. In page edit mode, start with a Content section (to add a new one click the plus sign (+) near an existing one)
  2. For Type select Grid
  3. Choose one of grid types below and follow the steps

Photo Grid

Example of photo grid.

Display an array of photos in a grid layout with options to overlay text and add links.

Create a Photo grid

News Grid

Example of news grid.

Feature news articles in a grid layout. Choose specific articles from your site or use RSS to pull in a news feed.

Create a News grid

Card Grid

Example of a card grid.

Cards are like boxes of WYSIWYGs, you can use them for a variety of content.

create a card grid

Mixed Grid

Example of mixed grid.

The most flexible grid type; you have the ability to put something different in each box. Experiment with different arrangements and combinations.

create a Mixed Grid