--- title: Layout date: 2024-06-24T08:48:00-07:00 author: Jiayu Kang canonical_url: "https://designsystem.umd.edu/foundation/layout" section: Foundation --- [Foundation](https://designsystem.umd.edu/foundation) # 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 overlaid on an example page. Triangle in background](https://umd-design.transforms.svdcdn.com/production/images/layout.png?w=1728&h=1120&auto=compress%2Cformat&fit=crop&dm=1730930815&s=1096a27e60609b6aeec1b895fd59eb87) ## Grid measurements ## Two Columns .umd-layout-grid-gap-two ### Sizing: max. 2 columns above 650px Column Block: 1 of 2 Column Block: 2 of 2 ## Three Columns .umd-layout-grid-gap-three ### Sizing: max. 3 columns above 1024px Column Block: 1 of 3 Column Block: 2 of 3 Column Block: 3 of 3 ## Four Columns .umd-layout-grid-gap-four ### Sizing: max. 4 columns above 1200px Column Block: 1 of 4 Column Block: 2 of 4 Column Block: 3 of 4 Column Block: 4 of 4 [ View layouts in a new window ](/visual-previews/grid) ## Mobile grid & breakpoints On mobile, the outer margin is 24px, but there are many components that go edge to edge. ![Layout of 4 equally spaced light red vertical columns depicting the optimal pattern for mobile designs](https://umd-design.transforms.svdcdn.com/production/images/Mobile-grid-breakpoints2.png?w=792&h=328&auto=compress%2Cformat&fit=crop&dm=1719255571&s=12787c792f8d4787ef1ad19561c08ea1) These are common breakpoints in responsive design. Major layout transformations primarily occur at two critical thresholds: 768px (mobile-to-tablet transition) and 1024px (tablet-to-desktop transition). XS (Mobile) 320-479px S (Mobile) 480-767px M (Tablet) 768-1023px L (Desktop) 1024-1439px XL (Wide Desktop) 1440px and above ## 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-3 cards per row **Desktop** 32-40 **Tablet** 32 **Mobile** 32 ![UMD Layout Grid Gap](https://umd-design.transforms.svdcdn.com/production/images/UMD-Layout-Grid-Gap.jpg?w=1522&h=720&auto=compress%2Cformat&fit=crop&dm=1724702702&s=50a234abf75d7639b31f75884341a879) View full example **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](https://umd-design.transforms.svdcdn.com/production/images/gutterless-grid.jpg?w=1596&h=1184&auto=compress%2Cformat&fit=crop&dm=1724710304&s=2debe979cee1e77f4daca155e2b63004) View full example **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) ![UMD Layout Grid Masonry](https://umd-design.transforms.svdcdn.com/production/images/UMD-Layout-Grid-Masonry.jpg?w=1522&h=654&auto=compress%2Cformat&fit=crop&dm=1724709324&s=05b83ef62e75b612c974c200c9ea15db) VIew full example [ Vertical Spacing ](https://designsystem.umd.edu/foundation/vertical-spacing) [ ![Vertical spacing - pink highlights show spacing between items on a web page](https://umd-design.transforms.svdcdn.com/production/images/vertical-spacing3.jpg?w=700&h=496&auto=compress%2Cformat&fit=crop&dm=1724448981&s=c60b14cc071b84b3c293d4ca57e5c741) ](https://designsystem.umd.edu/foundation/vertical-spacing)Documentation for on-page vertical spacing including in between components. [ Learn more ](https://designsystem.umd.edu/foundation/vertical-spacing) [ Horizontal Spacing ](https://designsystem.umd.edu/foundation/horizontal-spacing) [ ![page container widths - red bars of varying widths](https://umd-design.transforms.svdcdn.com/production/images/horizontal-spacing3.jpg?w=700&h=496&auto=compress%2Cformat&fit=crop&dm=1724449116&s=4c8706adf6714f1d18ed2f82592b9cec) ](https://designsystem.umd.edu/foundation/horizontal-spacing)Documentation for page content container widths and outer site horizontal padding. [ Learn more ](https://designsystem.umd.edu/foundation/horizontal-spacing)