---
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 the List and Event List on landing and home pages, Featured Quote, article pages to house both the main article (left) column and right rail elements.

 

 

##   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.  

 This content width is used to contain Accordions on landing pages, Image Carousel

 

 

##   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