Grids (Version 2) - Examples and Code

Beta Warning!

Note, the version 2 of grids is currently in beta. This code should not yet be used on live websites, but should only be used in testing to identify issues with this code before it is ready for production use.

About Grids (Version 2)

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. Version 2 of grids (grid-v2) uses new layout techniques that allow for greater consistency and flexibility when using grids.

(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, or columns.

5 Column Grid

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5


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

4 Column Grid

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4


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

3 Column Grid

Grid Item 1

Grid Item 2

Grid Item 3


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

2 Column Grid

Grid Item 1

Grid Item 2


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

1 Column Grid

Grid Item 1


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

Alternate Grid Styles

2 column Grids with varying sizes

There are multiple variants of 2 columns grids with varying sizes between the two elements. These are similar to the old 40/60, and 60/40 splits on V1 grids, but now there are now many more options. These sizes include the following splits:

10/90 Split
20/80 Split
30/70 Split
40/60 Split
50/50 Split
60/40 Split
70/30 Split
80/20 Split
90/10 Split

In each of these sizes the left number is the percentage of the size of the left column, and the right number is the percentage of the size of the right column. These 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-v2 grid-v2--2col-40-60">
  <div class="grid-v2__item">
    Grid Item 1 
  </div>
  <div class="grid-v2__item">
    Grid Item 2 
  </div>
</div>

60/40 Grid

Grid Item 1

Grid Item 2


<div class="grid-v2 grid-v2--2col-60-40">
  <div class="grid-v2__item">
    Grid Item 1 
  </div>
  <div class="grid-v2__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.

Gaps

Gap settings determine the space between rows and columns. The old "grid--flush" modifier can be achieved now by disabling the gaps, using the new "grid-v2--gap-none" class. There are several classes to adjust the grid gaps. The default setting is equivalent to "grid-v2--gap-md".

Setting the column and row gaps

"grid-v2--gap-none" - Removes gap from columns and rows
"grid-v2--gap-sm" - Sets gap for columns and rows to 5px (Small)
"grid-v2--gap-md" - Sets gap for columns and rows to 15px (Medium)
"grid-v2--gap-rg" - Sets gap for columns and rows to 30px (Large)

Setting the column gaps

"grid-v2--col-gap-none" - Removes gap from columns
"grid-v2--col-gap-sm" - Sets gap for columns to 5px (Small)
"grid-v2--col-gap-md" - Sets gap for columns to 15px (Medium)
"grid-v2--col-gap-rg" - Sets gap for columns to 30px (Large)

Setting the row gaps

"grid-v2--row-gap-none" - Removes gap from rows
"grid-v2--row-gap-sm" - Sets gap for rows to 5px (Small)
"grid-v2--row-gap-md" - Sets gap for rows to 15px (Medium)
"grid-v2--row-gap-rg" - Sets gap for rows to 30px (Large)

Custom gap sizes

If necessary, you can manually adjust the column or row gapsize for an element by adjusting the CSS custom properties with inline css.

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4


<div class="grid-v2 grid-v2--2col" style="--grid-column-gap: 7px; --grid-row-gap: 45px;">
  <div class="grid-v2__item">
    Grid Item 1 
  </div>
  <div class="grid-v2__item">
    Grid Item 2 
  </div>
  <div class="grid-v2__item">
    Grid Item 3 
  </div>
  <div class="grid-v2__item">
    Grid Item 4 
  </div>
</div>

Sizing/Mobile Breakpoints

Version 2 of grids allows for adjustments to the minimum size of a grid column. This allows you to adjust when a grid breaks to a smaller number of columns on mobile. The smaller sizes allow for grid that can get very narrow on mobile, and the larger sizes allows for grids that will more quickly break on mobile to give plenty of space to the columns

"grid-v2--size-xs" - Reduces column count when columns are under 100px in width (Extra Small)
"grid-v2--size-sm" - Reduces column count when columns are under 200px in width (Small)
"grid-v2--size-md" - Reduces column count when columns are under 250px in width (Medium)
"grid-v2--size-lg" - Reduces column count when columns are under 300px in width (Large)
"grid-v2--size-xl" - Reduces column count when columns are under 350px in width (X-Large)
"grid-v2--size-2xl" - Reduces column count when columns are under 400px in width (2X-Large)
"grid-v2--size-3xl" - Reduces column count when columns are under 450px in width (3X-Large)
"grid-v2--size-4xl" - Reduces column count when columns are under 500px in width (4X-Large)

Handling Remainders

Version 1 of Grids would always set remainder items to fill the space on the bottom row unless set to "grid--strict". The default behavior was not preferred as this could imply that the remainder items were of higher importance since they were larger sized. The strict grids option would result in items that would not break down as well on mobile. With version 2 of Grids, the default behavior is to have remainders fit left aligned in the grid at the same size as other elements, which is closer to how "grid--strict" was in the past. There are 2 alternate options to achieve different layouts for the remainder though. "grid-v2--remainder-expand" will make the trailing items expand to fit the container, similar to the default behavior on V1 grids. "grid-v2--remainder-center" will keep the remainder items the same size as all other columns, but it will align them to the center of the bottom row.

WARNING: The remainder-expand and remainder-center styles require a new CSS feature that is not yet supported in Firefox (but is in development for that browser), using these classes in the meantime will result in Firefox users seeing the default setting (left aligned, equal sized remainders).

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.