Layouts & Components

Grid Demo

Overview

The Grid component is used to display curated content in a structured layout, making it easy for users to scan and navigate. It can highlight featured pages, categories, or visual content, helping drive engagement and deeper exploration within the site.

Tutorial

Learn how to create and edit a Grid Layout component.

Content Grid Layout Tutorial

Grid Layout Component in CU Gold Theme

This is an example of the Grid component layout in CU Gold theme with a component header.

Uplifting Individuals and Communities

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

finance office icon

Offering High-Quality Education

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Serving Those Who Served & Their Families

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Grid Layout Component in Spring Snow Theme

This is an example of the Grid component layout in Spring Snow theme with a component header.

Offering High-Quality Education

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Serving Those Who Served & Their Families

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Supporting Learners of All Ages

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Grid Layout Component in Sandstone Theme

This is an example of the Grid component layout in Sandstone theme with a component header.

Serving Those Who Served & Their Families

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Uplifting Individuals and Communities

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Promoting Student Health & Wellbeing

Sed in ligula hendrerit, venenatis nisl eu, condimentum erat.

Grid Layout as an Image Gallery

Grid Layout Component as Image Gallery

This component will automatically update the layout depending on the amount of items added. It requires a minimum of 2 with a max of 9.

View down an aisle of bookshelves in a library, filled with colorful books, with a person sitting and reading at a table in the background near a large window.

View down an aisle of bookshelves in a library, filled with colorful books, with a person sitting and reading at a table in the background near a large window.

View down an aisle of bookshelves in a library, filled with colorful books, with a person sitting and reading at a table in the background near a large window.

Grid Layout Showcase

Two Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Three Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 3

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Four Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 3

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 4

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Five Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 3

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 4

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 5

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Six Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 3

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 4

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 5

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 6

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Seven Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 3

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 4

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 5

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 6

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 7

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Eight Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 3

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 4

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 5

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 6

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 7

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 8

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Nine Item Grid

Grid Item 1

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 2

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 3

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 4

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 5

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 6

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 7

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 8

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.

Grid Item 9

Sed interdum varius suscipit. Proin at pharetra felis. Aenean lobortis arcu sit amet justo lacinia.