Skip to main content

Grid

The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Unifi’s responsive UI is based on a 12-column grid layout.

How it works

  • The grid system uses CSS’s Flexible Box module for high flexibility.
  • There are two types of layout: containers and items.
  • Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Items have padding to create the spacing between individual items.
  • There are five grid breakpoints: xs, sm, md, lg, and xl.

Spacing

The responsive grid focuses on consistent spacing widths, rather than column width. Unifi design margins and columns follow an 8px square baseline grid, and applied classes are simplified to the multiplier. Available spacing multiplier classes are 1-8.

Usage Note

Because of the negative margin applied for set spacing classes, a parent is needed around containers that will need a padding equal to half the largest applied spacing to prevent overflow scroll on mobile, ex. if spacing is 3 (24px), <main> needs padding: 12px.

Constrained Grid

For a layout that would benefit from a max width to prevent extending to screen edges on large displays to cap line length and content width, use the .u-layout-constrained class on a grid-wrapping element.

The default is 1200px, which can be customized with the theme variable $u-layout-constrained.

Note: To remove default centering of the layout within the viewport, add the .u-mx-xs-0 class.

Grid Item Layout

By default, .u-grid-item elements equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.

Conversely, you can set .u-grid-items to .u-[breakpoint]-auto to limit their width to the size of their children, not to exceed 100% of the parent width OR 100% of the remaining available space if used in combo with an explicit width class of a lower breakpoint (ex.u-xs-6 u-md-auto).

To use a defined width at a lower breakpoint, then reset to default at a higher breakpoint, combo with .u-[breakpoint] classes.

Fluid Grids

Fluid grids use columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dynamically.

Basic Grid

By setting explicit widths, the column widths apply at all breakpoints, xs and up.

Grid with Breakpoints

Some columns have multiple widths defined, causing the layout to change at the defined breakpoint.

Nested Grid

The container and item classes are independent. They can be combined.

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

Grid Utilities

Alignment

Classes are available to set flexbox align and justify properties, and should be added to .u-grid-container elements to align the child .u-grid-item elements.

u-grid-alignitems

u-grid-justify

Direction

Classes are available to set flexbox direction properties, and should be added to .u-grid-container elements to affect the child .u-grid-item elements.

u-grid-direction

Spacing Breaks

Use the following classes to create a larger space in the grid, or to force columns onto a new row without closing and reopening a new .u-grid-container.

  • .u-grid-break--100 - 100% width
  • .u-grid-break--75 - 75% width
  • .u-grid-break--50 - 50% width
  • .u-grid-break--25 - 25% width

Properties