Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

Grid

The grid content type consists of boxes of content displayed in a uniform layout across a page. But that's a pretty bland description, grids are SO much more. Grids provide an attractive, exciting, enticing way to lay out content, and yes while they're a little square, we think you'll warm up to them nicely. 

The nitty griddy:

  • 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*

    Examples of 2, 3, and 4 columns grids using puppies and kittens in each box.
    *News RSS grids limit boxes to 30 which does limit overall row count.
  • Minimum of one box must be populated with content, no maximum
  • A rainbow of background color choices to liven things up

A grid has a lot going for it. Interested? Swipe right!

You bet! Not only can you have multiple grids on a page, each grid can have its own type, number of columns, and background color. But please don't get too crazy! Having a lot of grids on a page may affect load times.

They look fantastic. CMS pages are fully responsive (i.e., mobile-friendly) so you can be assured that your grids will adapt to the devices your website visitors are using. Don't worry, we did a TON of testing on this back in the lab.

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

One column grids were put on the endangered species list so it was illegal for us to capture one. Instead, use the Wide content type for a full-width content area.

Kitten in jungle vegetatian
The elusive one column grid.

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

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 a 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

Card grid

Cards are just boxes of WYSIWYGs, put anything you want in them!

create a card grid

Mixed Grid

Example of a mixed grid using all grid types

The hodge-podge of grids, put something different in each box. Here's your chance to experiment with mixology!

create a Mixed Grid