Layout
Layouts within the UMD Design System use a standardized grid and spacing system based on multiples of four. The grid provides an underlying structure to our designs.
Grid measurements
UMD Grid Gap .umd-grid-gap
Size: null/"default" (2 columns above 650px)
UMD Grid Gap Three .umd-grid-gap-three
Size: Three (3 columns above 1024px)
UMD Grid Gap Four .umd-grid-gap-four
Size: Four (4 columns above 1200px)
Mobile grid & breakpoints
On mobile, the outer margin is 24px, but there are many components that go edge to edge.
X-Small
360-599
Small
600-767
Medium
360-599
Large
600-767
X-Large
768-1000
Grid types & examples
Ideal page layouts will typically contain a mix of grid styles, although an index page may just contain a Grid Gap grid.
UMD Layout Grid Gap (Spaced Grid)
Full width: 2-4 cards per row. Uniform spacing
Interior width: 2 cards per row
Desktop 40
Tablet 32
Mobile 32
UMD Layout Grid (Gutterless)
Flexible layout, 2-4 cards take up equal width per row, or allow for a wide feature. Not used on interior pages
Desktop 0
Tablet 0
Mobile 8
UMD Layout Grid Gap Masonry (Staggered Grid)
Flexible layout, 2-3 cards take up equal width per row
2 cards alone use small lock. Not used on interior pages
Desktop 40
Tablet 32
Mobile 24
(normal stack)
