Grids - Examples and Code | UO Digital Strategy

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.

(Note: These grid items have a green background applied for clarity in these examples, this is provided by the extra div element with the "palette-bg-uo-green" class and the style options. This element is not part of the default template and should not be used in your code.)

Standard Grid Styles

The usual way of using grids is with equal-sizes columns with space in between and a maximum number of columns that are shown when space is available. This style of grid can be shown with a maximum of 1,2,3,4,5,6, or 10 columns.

5 Column Grid

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5


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

4 Column Grid

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4


<div class="grid grid--4col">
  <div class="grid__item">
    Grid Item 1 
  </div>
  <div class="grid__item">
    Grid Item 2 
  </div>
  <div class="grid__item">
    Grid Item 3 
  </div>
  <div class="grid__item">
    Grid Item 4 
  </div>
</div>

3 Column Grid

Grid Item 1

Grid Item 2

Grid Item 3


<div class="grid grid--3col">
  <div class="grid__item">
    Grid Item 1 
  </div>
  <div class="grid__item">
    Grid Item 2 
  </div>
  <div class="grid__item">
    Grid Item 3 
  </div>
</div>

2 Column Grid

Grid Item 1

Grid Item 2


<div class="grid grid--2col">
  <div class="grid__item">
    Grid Item 1 
  </div>
  <div class="grid__item">
    Grid Item 2 
  </div>
</div>

1 Column Grid

Grid Item 1


<div class="grid grid--1col">
  <div class="grid__item">
    Grid Item 1 
  </div>
</div>

Alternate Grid Styles

40/60 Grids and 60/40 Grids

40/60 and 60/40 Grids can be used when you want two columns, one with more emphasis (size) than the other. This is useful for places where you want a photo with a wide text block next to it or other sorts of arrangements with mixed types of content.

40/60 Grid

Grid Item 1

Grid Item 2


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

60/40 Grid

Grid Item 1

Grid Item 2


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

Grid Modifiers

Multiple modifier classes exists to make the grids display differently or adjust in different ways on mobile. These classes can be added to the rest of the classes on the grid element to apply these changes.

Flush Grids

Flush grids lack the spacing between grid items, which causes all the items to sit flush against each other. Flush grids are great for image content when creating a collage-like effect within the grid.

Grid Item 1

Grid Item 2

Grid Item 3


<div class="grid grid--3col grid--flush">
  <div class="grid__item">
    Grid Item 1 
  </div>
  <div class="grid__item">
    Grid Item 2 
  </div>
  <div class="grid__item">
    Grid Item 3 
  </div>
</div>

Strict Grids

Strict grids will prevent items from growing larger than the normal fraction of size, so items in a strict 5 column grid will never grow beyond the standard cell size on the trailing items.

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5


<div class="grid grid--4col grid--strict">
  <div class="grid__item">
    Grid Item 1 
  </div>
  <div class="grid__item">
    Grid Item 2 
  </div>
  <div class="grid__item">
    Grid Item 3 
  </div>
  <div class="grid__item">
    Grid Item 4 
  </div>
  <div class="grid__item">
    Grid Item 5 
  </div>
</div>

Even Grids

Even grids will center trailing grid items to keep the grid more balanced looking.

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5


<div class="grid grid--4col grid--even">
  <div class="grid__item">
    Grid Item 1 
  </div>
  <div class="grid__item">
    Grid Item 2 
  </div>
  <div class="grid__item">
    Grid Item 3 
  </div>
  <div class="grid__item">
    Grid Item 4 
  </div>
  <div class="grid__item">
    Grid Item 5 
  </div>
</div>

Where to Use

Grids are a great option for presenting a set of similar content elements, such as photos, cards, photo buttons, buttons, news stories, etc.

Tips for using Grids

Aim for event columns on desktop when you can. For example, if you have a grid with 6 elements in it, either using a 6 column grid or a 3 column grid (which would have two rows of 3 items at full width) will give the best results.
Avoid placing too many call to action buttons in a grid. Grids that have 2-4 buttons in them work great for displaying a set of options. Grids with many rows and columns worth of buttons can be overwhelming and hard to read at a glance.
Keep a consistent design/content across all the items in a grid. Visual repetition works well with grids, so it works best to use the same type of content (all images, photo buttons, cards, etc.) with a similar visual design in all the items of each individual grid.