Skip to content
UO Web Design Framework Documentation

Grid (V2)

Grids (V2) 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. Compared to V1 grids, V2 grids have a more intuitive default behavior and spacing, and provide a much larger variety of positioning options.

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. The remainder feature is not yet supported in Firefox.

Examples and Code

Section titled “Examples and Code”

Open Full Example 
<h2>1 Column Grids</h2>
<div class="grid-v2 grid-v2--1col">
  <div class="grid-v2__item b1">
    1 Column Grid Item 1 
  </div>
</div>
<h2>2 Column Grids</h2>
<div class="grid-v2 grid-v2--2col">
  <div class="grid-v2__item b1">
    2 Column Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    2 Column Grid Item 2 
  </div>
</div>
<h2>3 Column Grids</h2>
<div class="grid-v2 grid-v2--3col">
  <div class="grid-v2__item b1">
    3 Column Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    3 Column Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    3 Column Grid Item 3 
  </div>
</div>
<h2>4 Column Grids</h2>
<div class="grid-v2 grid-v2--4col">
  <div class="grid-v2__item b1">
    4 Column Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    4 Column Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    4 Column Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    4 Column Grid Item 4 
  </div>
</div>
<h2>5 Column Grids</h2>
<div class="grid-v2 grid-v2--5col">
  <div class="grid-v2__item b1">
    5 Column Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    5 Column Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    5 Column Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    5 Column Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    5 Column Grid Item 5 
  </div>
</div>
Open Full Example 
<h2>2 Column Grids 10/90 Split</h2>
<div class="grid-v2 grid-v2--2col-10-90">
  <div class="grid-v2__item b1">
    10% / 90% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    10% / 90% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 20/80 Split</h2>
<div class="grid-v2 grid-v2--2col-20-80">
  <div class="grid-v2__item b1">
    20% / 80% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    20% / 80% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 30/70 Split</h2>
<div class="grid-v2 grid-v2--2col-30-70">
  <div class="grid-v2__item b1">
    30% / 70% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    30% / 70% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 40/60 Split</h2>
<div class="grid-v2 grid-v2--2col-40-60">
  <div class="grid-v2__item b1">
    40% / 60% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    40% / 60% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 50/50 Split</h2>
<div class="grid-v2 grid-v2--2col-50-50">
  <div class="grid-v2__item b1">
    50% / 50% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    50% / 50% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 60/40 Split</h2>
<div class="grid-v2 grid-v2--2col-60-40">
  <div class="grid-v2__item b1">
    60% / 40% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    60% / 40% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 70/30 Split</h2>
<div class="grid-v2 grid-v2--2col-70-30">
  <div class="grid-v2__item b1">
    70% / 30% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    70% / 30% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 80/20 Split</h2>
<div class="grid-v2 grid-v2--2col-80-20">
  <div class="grid-v2__item b1">
    80% / 20% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    80% / 20% Split Grid Item 2 
  </div>
</div>
<h2>2 Column Grids 90/10 Split</h2>
<div class="grid-v2 grid-v2--2col-90-10">
  <div class="grid-v2__item b1">
    90% / 10% Split Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    90% / 10% Split Grid Item 2 
  </div>
</div>
Open Full Example 
<h2>5 Column Grids Size XS</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-xs">
  <div class="grid-v2__item b1">
    XS Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    XS Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    XS Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    XS Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    XS Grid Item 5 
  </div>
</div>
<h2>5 Column Grids Size Small</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-sm">
  <div class="grid-v2__item b1">
    SM Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    SM Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    SM Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    SM Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    SM Grid Item 5 
  </div>
</div>
<h2>5 Column Grids Size Medium</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-md">
  <div class="grid-v2__item b1">
    MD Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    MD Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    MD Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    MD Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    MD Grid Item 5 
  </div>
</div>
<h2>5 Column Grids Size Large</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-lg">
  <div class="grid-v2__item b1">
    LG Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    LG Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    LG Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    LG Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    LG Grid Item 5 
  </div>
</div>
<h2>5 Column Grids Size XL</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-xl">
  <div class="grid-v2__item b1">
    XL Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    XL Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    XL Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    XL Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    XL Grid Item 5 
  </div>
</div>
<h2>5 Column Grids Size 2XL</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-2xl">
  <div class="grid-v2__item b1">
    2XL Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    2XL Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    2XL Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    2XL Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    2XL Grid Item 5 
  </div>
</div>
<h2>5 Column Grids Size 3XL</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-3xl">
  <div class="grid-v2__item b1">
    3XL Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    3XL Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    3XL Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    3XL Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    3XL Grid Item 5 
  </div>
</div>
<h2>5 Column Grids Size 4XL</h2>
<div class="grid-v2 grid-v2--5col grid-v2--size-4xl">
  <div class="grid-v2__item b1">
    4XL Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    4XL Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    4XL Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    4XL Grid Item 4 
  </div>
  <div class="grid-v2__item b1">
    4XL Grid Item 5 
  </div>
</div>
Open Full Example 
<h2>4 Column Grids No Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--gap-none">
  <div class="grid-v2__item b1">
    No Grid Gap Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    No Grid Gap Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    No Grid Gap Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    No Grid Gap Grid Item 4 
  </div>
</div>
<h2>4 Column Grids Small Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--gap-sm">
  <div class="grid-v2__item b1">
    SM Grid Gap Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    SM Grid Gap Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    SM Grid Gap Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    SM Grid Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids Medium Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--gap-md">
  <div class="grid-v2__item b1">
    MD Grid Gap Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    MD Grid Gap Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    MD Grid Gap Grid Item 3 
  </div>
  <div class="grid-v2__item b1">
    MD Grid Gap Grid Item 4 
  </div>
</div>
<h2>4 Column Grids Large Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--gap-lg">
  <div class="grid-v2__item b1">
    LG Grid Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    LG Grid Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    LG Grid Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    LG Grid Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids No Row Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--row-gap-none">
  <div class="grid-v2__item b1">
    No Row Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    No Row Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    No Row Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    No Row Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids Small Row Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--row-gap-sm">
  <div class="grid-v2__item b1">
    SM Row Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    SM Row Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    SM Row Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    SM Row Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids Medium Row Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--row-gap-md">
  <div class="grid-v2__item b1">
    MD Row Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    MD Row Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    MD Row Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    MD Row Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids Large Row Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--row-gap-lg">
  <div class="grid-v2__item b1">
    LG Row Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    LG Row Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    LG Row Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    LG Row Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids No Col Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--col-gap-none">
  <div class="grid-v2__item b1">
    No Column Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    No Column Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    No Column Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    No Column Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids Small Col Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--col-gap-sm">
  <div class="grid-v2__item b1">
    SM Column Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    SM Column Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    SM Column Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    SM Column Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids Medium Col Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--col-gap-md">
  <div class="grid-v2__item b1">
    MD Column Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    MD Column Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    MD Column Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    MD Column Gap Grid Item 4
  </div>
</div>
<h2>4 Column Grids Large Col Gap</h2>
<div class="grid-v2 grid-v2--2col grid-v2--col-gap-lg">
  <div class="grid-v2__item b1">
    LG Column Gap Grid Item 1
  </div>
  <div class="grid-v2__item b1">
    LG Column Gap Grid Item 2
  </div>
  <div class="grid-v2__item b1">
    LG Column Gap Grid Item 3
  </div>
  <div class="grid-v2__item b1">
    LG Column Gap Grid Item 4
  </div>
</div>
Open Full Example 
<h2>2 Column Grids Standard Remainder</h2>
<div class="grid-v2 grid-v2--2col">
  <div class="grid-v2__item b1">
    Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    Standard Remainder Grid Item 3 
  </div>
</div>
<h2>2 Column Grids Standard Expanded Remainder</h2>
<div class="grid-v2 grid-v2--2col grid-v2--remainder-expand">
  <div class="grid-v2__item b1">
    Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    Expanded Remainder Grid Item 3 
  </div>
</div>
<h2>2 Column Grids Centered Remainder</h2>
<div class="grid-v2 grid-v2--2col grid-v2--remainder-center">
  <div class="grid-v2__item b1">
    Grid Item 1 
  </div>
  <div class="grid-v2__item b1">
    Grid Item 2 
  </div>
  <div class="grid-v2__item b1">
    Centered Remainder Grid Item 3 
  </div>
</div>

Guidance

Section titled “Guidance”

When to Use Grids

Section titled “When to Use Grids”
  • For Content Listings: Grids work great for listings of articles, stories, profiles and other content.
  • For Simple Layouts: 40/60 and other 2 column split Grids and such work well for doing basic layout patterns for mixed content.

Usage Guidance

Section titled “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

Section titled “Styles”
ClassnameEffectReason to Use
grid-v2--1colGrid has a single columnUse for inheriting standard grid padding when among similar elements
grid-v2--2colGrid has 2 columns at full-width, compresses to one column on mobileUse for columns of 2 even sized grid items
grid-v2--3colGrid has 3 columns at full-width, compresses to a two and then one column on mobileUse for columns of 3 even sized grid items
grid-v2--4colGrid has 4 columns at full-width, compresses to a three, two, and then one column on mobileUse for columns of 4 even sized grid items
grid-v2--5colGrid has 5 columns at full-width, compresses to a four, three, two, and then one column on mobileUse for columns of 5 even sized grid items
grid-v2--2col-10-90Grid has two columns with the left one 10% of the size and right one 90%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-20-80Grid has two columns with the left one 20% of the size and right one 80%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-30-70Grid has two columns with the left one 30% of the size and right one 70%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-40-60Grid has two columns with the left one 40% of the size and right one 60%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-50-50Grid has two columns with the left one 50% of the size and right one 50%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-60-40Grid has two columns with the left one 60% of the size and right one 40%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-70-30Grid has two columns with the left one 70% of the size and right one 30%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-80-20Grid has two columns with the left one 80% of the size and right one 20%Use for side-by-side layouts where one item is wider than the other
grid-v2--2col-90-10Grid has two columns with the left one 90% of the size and right one 10%Use for side-by-side layouts where one item is wider than the other

Modifier Classes

Section titled “Modifier Classes”

Minimum Item Size

Section titled “Minimum Item Size”

These modifier classes determine how quickly the grid breaks down on mobile. Larger grid sizes mean they will break down earlier to ensure the items do not get too narrow. The small sizes should be used when the content is not wide and you want many columns, and the large sizes should be used when the content is wide for a few columns. Note, these sizes may limit the max number of columns that will display even on wide settings since there must be enough space for each column to meet the minimum size.

ClassnameEffect
grid-v2--size-xsMinimum item width of 100px
grid-v2--size-smMinimum item width of 200px
grid-v2--size-mdMinimum item width of 250px, the standard size
grid-v2--size-lgMinimum item width of 300px
grid-v2--size-xlMinimum item width of 350px
grid-v2--size-2xlMinimum item width of 400px
grid-v2--size-3xlMinimum item width of 450px
grid-v2--size-4xlMinimum item width of 500px

Gap Size

Section titled “Gap Size”

These modifier classes adjust the padding between cells. They allow for uniform adjustments, as well as adjustments to just the row gap or column gap. The default value is the medium setting (15px).

ClassnameEffect
grid-v2--gap-noneNo gap between items
grid-v2--gap-sm5px gap between items
grid-v2--gap-md15px gap between items (default)
grid-v2--gap-lg30px gap between items
grid-v2--row-gap-noneNo gap between rows
grid-v2--row-gap-sm5px gap between rows
grid-v2--row-gap-md15px gap between rows (default)
grid-v2--row-gap-lg30px gap between rows
grid-v2--col-gap-noneNo gap between columns
grid-v2--col-gap-sm5px gap between columns
grid-v2--col-gap-md15px gap between columns (default)
grid-v2--col-gap-lg30px gap between columns

Remainders

Section titled “Remainders”

These modifier classes adjust how trailing remainder elements (such as a 4th column when the grid is 3 columns) behave.

ClassnameEffect
(Default)Remainder items are left aligned and the size of the first column
grid-v2--remainder-expandRemainder items fill the whole row
grid-v2--remainder-centerRemainder items are center aligned and the size of a single column