Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Grid Container

Grid Container

The Grid Container is used to arrange specific components in a full-width grid of content with multiple options for the number and size of grid cells to display.

grid-container-example
Figure 1: Example of a Grid Container from the MSU homepage. This example uses the “1 Tall, 4 Small (2x2)” variant with Image, Story and Fact components.

 

Component Information

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 11 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)
    • Story (S, M, T, L, XL) — future addition

Frequently Asked Questions

Being a container component, the Grid Container does not appear in a page’s data folder in Content Editor like other components. Make edits to this component in Pages.

Some component data does not display when used in a Grid Container. Consult that component’s documentation for its usage in a Grid Container.

Instructions for Use

In Pages:

  1. Select the page in the content tree.
  2. Click “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Grid Container component from list. 

Alternate method:

  1. Click Components tab at top of content tree.
  2. Locate Grid Container component.
  3. Drag the Grid Container component to any empty placeholder area of the page below the Breadcrumb links.
  1. With the Grid Container selected, expand the Advanced styling area of the right-side Component Options panel.
  2. Choose the desired variant option from the Variant drop-down menu.
  1. Select a Grid Container cell placeholder.
  2. Choose the desired component from the list of available components.
  3. In the Assign content item window, choose the component data to use: 
    1. For existing components, select from the page’s Data folder or from the appropriate shared folder.
    2. For new components, select Create new, type in the component title and hit enter.
  4. Once the component data is selected, click on the Assign button in the lower right corner.
  5. Add or edit component data, per the component requirements.
  6. Repeat the process until all Grid Container cells are filled.
grid-container-admissions-example
Figure 2: Example of a Grid Container from the Office of Admissions. This example uses the “6 Small” variant with Fact, Video and Grid Ad components.

Layout Variants

1-large-2-small-blank
Figure 3: Grid Container layout showing the “1 Large, 2 Small” variant.

 

1-large-2-small-example
Figure 4: Grid Container layout showing the “1 Large, 2 Small” variant. Each cell contains a Grid Ad component.
1-large-2-small-blank
Figure 3: Grid Container layout showing the “1 Large, 2 Small” variant.

 

1-large-2-small-example
Figure 4: Grid Container layout showing the “1 Large, 2 Small” variant. Each cell contains a Grid Ad component.
2-medium-blank
Figure 7: Grid Container layout showing the “2 Medium” variant.

 

2-medium-example
Figure 8: Grid Container layout showing the “2 Medium” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 9: Grid Container layout showing the “2 Small, 1 Large” variant.

 

2-small-1-large-example
Figure 10: Grid Container layout showing the “2 Small, 1 Large” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 11: Grid Container layout showing the “3 Small” variant.

 

2-small-1-large-example
Figure 12: Grid Container layout showing the “3 Small” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 13: Grid Container layout showing the “4 Small, 1 Tall” variant.

 

2-small-1-large-example
Figure 14: Grid Container layout showing the “4 Small, 1 Tall” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 15: Grid Container layout showing the “6 Small” variant.

 

2-small-1-large-example
Figure 16: Grid Container layout showing the “6 Small” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 17: Grid Container layout showing the “1 Tall, 1 Large” variant.

 

2-small-1-large-example
Figure 18: Grid Container layout showing the “1 Tall, 1 Large” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 19: Grid Container layout showing the “1 Tall, 4 Small” variant.

 

2-small-1-large-example
Figure 20: Grid Container layout showing the “1 Tall, 4 Small” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 21: Grid Container layout showing the “3 Tall” variant.

 

2-small-1-large-example
Figure 22: Grid Container layout showing the “3 Tall” variant. Each cell contains a Grid Ad component.
2-small-1-large-blank
Figure 23: Grid Container layout showing the “X-Large” variant.

 

2-small-1-large-example
Figure 24: Grid Container layout showing the “X-Large” variant. The cell contains one Grid Ad component.

Tool Use Guide

 

 PagesExplorerContent Editor
Add componentOptimal  
Select variant (i.e., layout of cells)Optimal  
Add content components to cells*Optimal  
Edit content components*PossiblePossiblePossible

*Add content type and then follow component-specific instructions

 

Documentation updated: Nov. 1, 2024

XMC Component Guide