Grid Container

Benefits

• The Grid Container is a container component used to display a full-width grid of content cells in the main body of a page.
• The individual grid cells are available in different sizes and can contain different types of components, giving a content author flexibility in designing the webpage to accommodate a variety of content. 

Variants

• Grid Containers have 12 variants available. Each variant offers a different combination of grid cell numbers and sizes.
• Cell sizes are:
  • Small
  • Medium
  • Tall
  • Large
  • X-Large
• The Grid Container can be used to display a select number of components, some of which are only available in certain cell sizes. The components available (with respective cell sizes in parentheses) are:
  • Image (S, M, T, XL)
  • MSU Rich Text (S, M, T, L, XL)
  • Video Player (S, M, T, XL)
  • Box CTA (S)
  • Grid Ad (S, M, T, L, XL)
  • Fact (S)
  • Social Share (S)

• Grid Containers are placed and edited in Page Builder.
• Grid Containers should be used in full-width main content areas of pages.
• Before placing a Grid Container on a page in Page Builder, have a content plan ready as this will determine what components are needed and what variant to use.
• While most components can be created while making a Grid Container, it may be easier to create the needed components first.
• Changing the Grid Container variant will clear components from any cells that are not the same size.
• Edit cell components following their requirements. Some component data may not display when used in a Grid Container cell.
• It is not recommended to use the Grid Container at the top of a webpage without a hero banner or other component above the Grid Container. This layout is uncommon in web design and visitors may think the webpage did not load correctly.

• The Grid Container will fill the full width of the webpage when viewed on desktop.
• When viewed on a mobile device, the grid container cells stack vertically, starting with the left/top-left cell first and the right/bottom-right cell being last.
• Preview the grid at various browser and device sizes to view the stacking order.

Grid Container title (single-line text)

• This does not display on the webpage.
• This field is only for system use.

Grid Container variants

• Located in Pages under Component Options > Advanced styling > Variant.
• Variant options are:
  • 1 Large, 2 Small (Stacked)
  • 1 Large, 1 Tall
  • 2 Medium
  • Small 2 and 1 (Newsletter)
  • 2 Small (Stacked), 1 Large
  • 3 Small
  • 4 Small (2x2), 1 Tall
  • 6 Small (3x2)
  • 1 Tall, 1 Large
  • 1 Tall, 4 Small (2x2)
  • 3 Tall
  • X-Large

Related Components

• Image
• Rich Text
• Video Player
• Box CTA
• Grid Ad
• Fact
• Social Share

Live Examples

• Demo page: Grid components