---
title: Horizontal Spacing
date: 2024-10-10T14:24:00-07:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/foundation/horizontal-spacing"
section: Foundation
---
[Layout](https://designsystem.umd.edu/foundation/layout)

#  Horizontal Spacing 

Horizontal spacing is determined by the content width or “lock” per section or component and whether a left rail is needed. These locks are centered on the page. For spacing between elements on a page, see Grids.

 

 

  

   ##  Content Width / Lock 

##   UMD Layout: Full Horizontal Space   .umd-layout-space-horizontal-full  

###  Sizing: max. content width 100% 

  Visual example of the larger horizontal lock with blocks of solid color showing a maximum content width of 100%.  

 Full width of parent element.

 

 

##   UMD Layout: Larger Horizontal Space   .umd-layout-space-horizontal-larger  

###  Sizing: max. content width 1472px 

  Visual example of the larger horizontal lock with blocks of solid color showing a maximum content width of 1472 pixels.  

 The widest content width contains common components including Pathway, Banner Promo, and Card Grid.

 

 

##   UMD Layout: Large Horizontal Space   .umd-layout-space-horizontal-large  

###  Sizing: max. content width 1272px 

  Visual example of the Large horizontal lock with blocks of solid color showing a maximum content width of 1272 pixels.  

 This content width is available, but not used widely.

 

 

##   UMD Layout: Normal Horizontal Space   .umd-layout-space-horizontal-normal  

###  Sizing: max. content width 1152px 

  Visual example of the Normal horizontal lock with blocks of solid color showing a maximum content width of 1152 pixels.  

 Used to contain some grid layouts and quote options.

 

 

##   UMD Layout: Small Horizontal Space   .umd-layout-space-horizontal-small  

###  Sizing: max. content width 864px 

  Visual example of the small horizontal lock with blocks of solid color showing a maximum content width of 864 pixels.  

 Used to contain Accordions, Lists, and Standard Image Carousels, Tabs, some Section Intro options and rich text on landing pages.

 

 

##   UMD Layout: Smallest Horizontal Space   .umd-layout-space-horizontal-smallest  

###  Sizing: max. content width 672px 

  Visual example of the smallest horizontal lock with blocks of solid color showing a maximum content width of 672 pixels.  

 This content width is used on interior pages to contain text areas, Accordion, Banner Promo, Card Grid, List.

 

 

  [ View layouts in a new window ](/visual-previews/lock)  

 

 

 

  ##  Site Padding 

The Site Lock includes outer padding which adjusts with screen size. Max content-widths above account for site padding.

 

 

 **Desktop Wide (1200+)** 64px

 

**Desktop (1024 +)** 48px

 

**Tablet (767+)** 48px

 

**Mobile** 24px