Grid

Grids are layouts of multiple horizontally stacked items which will dynamically collapse to fit within the size of the page/container/device that they are in. They come in many different column arrangements which describe the max number of columns that can show if enough space is available. Grids are a great option for presenting a set of similar content elements, such as photos, cards, photo buttons, buttons, news stories, etc.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

This component requires full-screen display to display correctly for grids with many columns, open the full example for a more accurate display.

Examples and Code

Select example

Open Full Example

<h2>1 Column Grids</h2>
<div class="grid grid--1col">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
</div>
<h2>2 Column Grids</h2>
<div class="grid grid--2col">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
</div>
<h2>3 Column Grids</h2>
<div class="grid grid--3col">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
  <div class="grid__item b1">
    Grid Item 3 
  </div>
</div>
<h2>4 Column Grids</h2>
<div class="grid grid--4col">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
  <div class="grid__item b1">
    Grid Item 3 
  </div>
  <div class="grid__item b1">
    Grid Item 4 
  </div>
</div>
<h2>5 Column Grids</h2>
<div class="grid grid--5col">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
  <div class="grid__item b1">
    Grid Item 3 
  </div>
  <div class="grid__item b1">
    Grid Item 4 
  </div>
  <div class="grid__item b1">
    Grid Item 5 
  </div>
</div>

Open Full Example

<h2>2 Column 40/60 Grids</h2>
<div class="grid grid--2col-40-60">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
</div>
<h2>2 Column 60/40 Grids</h2>
<div class="grid grid--2col-60-40">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
</div>

Open Full Example

<h2>3 Column Flush Grids</h2>
<div class="grid grid--3col grid--flush">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
  <div class="grid__item b1">
    Grid Item 3 
  </div>
</div>
<h2>4 Column Strict Grids</h2>
<div class="grid grid--4col grid--strict">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
  <div class="grid__item b1">
    Grid Item 3 
  </div>
  <div class="grid__item b1">
    Grid Item 4 
  </div>
  <div class="grid__item b1">
    Grid Item 5 
  </div>
</div>
<h2>4 Column Even Grids</h2>
<div class="grid grid--4col grid--even">
  <div class="grid__item b1">
    Grid Item 1 
  </div>
  <div class="grid__item b1">
    Grid Item 2 
  </div>
  <div class="grid__item b1">
    Grid Item 3 
  </div>
  <div class="grid__item b1">
    Grid Item 4 
  </div>
  <div class="grid__item b1">
    Grid Item 5 
  </div>
</div>

Guidance

When to Use Grids

For Content Listings: Grids work great for listings of articles, stories, profiles and other content.
For Simple Layouts: 40/60 Grids and such work well for doing basic layout patterns for mixed content.

Usage Guidance

Use grids with even columns when possible: Even column grids break down better on mobile displays since they will not have remainder items.
Use a consistent design across elements in a grid: Grids work best with a similar style and type of content.
Don’t use for a large number of call to action buttons: For a large number of links you should instead use the Resource Listing component.

Styles

Classname	Effect	Reason to Use
`grid--1col`	Grid has a single column	Use for inheriting standard grid padding when among similar elements
`grid--2col`	Grid has 2 columns at full-width, compresses to one column on mobile	Use for columns of 2 even sized grid items
`grid--3col`	Grid has 3 columns at full-width, compresses to a two and then one column on mobile	Use for columns of 3 even sized grid items
`grid--4col`	Grid has 4 columns at full-width, compresses to a three, two, and then one column on mobile	Use for columns of 4 even sized grid items
`grid--5col`	Grid has 5 columns at full-width, compresses to a four, three, two, and then one column on mobile	Use for columns of 5 even sized grid items
`grid--2col-40-60`	Grid has two columns with the right one larger than the left	Use for side-by-side layouts where one item is wider than the other
`grid--2col-60-40`	Grid has two columns with the left one larger than the right	Use for side-by-side layouts where one item is wider than the other

Modifier Classes

Classname	Effect	Reason to Use
`grid--flush`	Grid items do not have padding between each other	Use when you want the element flush against each other, like with a photo collage
`grid--strict`	Trailing grid columns will stay the same size	Use when you want to prevent items from expanding when breaking down on mobile
`grid--even`	Trailing grid items do not expand and sit in the middle of the grid	Use on most newer grids for a better visual aesthetic