Components
Inputs
Page Elements
Filters
Feedback

Grid

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Ticketmaster uses a responsive, mobile first, fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Columns, Gutters and Margins

The Ticketmaster grid system is made up of three primary elements: columns, gutters and margins.

Columns image
Gutters image
Margins image

Columns

Content is placed in areas of the screen that contain columns. Columns “flex” or adjust to the size of the screen.

Content example image

Breakpoints

The breakpoint range determines the number of columns, gutter width and margin width for a predetermined set of screen sizes.

PropScreensizeMarginsGuttersColumns
small
767 px
16 px
16 px
12
medium
768 px
24 px
24 px
12
large
1024 px
24 px
24 px
12
xLarge
1440 px
24 px
24 px
12

24px Margin and Gutters: 768 and above

Use the 24px grid for screen sizes 768 and up.

Above 768 image

16px Margin and Gutters: 767 and below

Use the 16px grid for screen sizes 767 and below.

Below 768 image

Layout Guidelines

There are some easy grid system guidelines to follow when laying out a page design.

Clean margins image

Content never appears in the margins.

Resize example image

Not everything aligns neatly to the grid, but most content areas do. In this example, perhaps a search field does align to the grid, but other filters across the top of the page do not.

Layout Examples

Although the grid system allows for many possible layout configurations, the following are some of the most common options for TM Product Design.

Desktop

There are many possible desktop configuration options. Here are a couple of common applications.

Equal Sized Columns
Equal Sized Columns image
Mixed Sized Columns
Mixed Sized Columns image
Mixed Sized Columns on Multiple Rows
Mixed Sized Columns on Multiple Rows image
Fixed-width side nav: Mixed Sized Columns on Multiple Rows
Fixed-width side nav image

Tablet

Here are some of the most common layout options for tablet devices..

Tablet - Landscape (1024) - 3 columns
components overview image
Tablet - Landscape (1024) - 2 columns
Tablet 3 col image
Tablet - Landscape (768) - 2 columns
Tablet 2 col image
Tablet - Landscape (768) - 1 column
Tablet 1 col image

Mobile

Here are some of the most typical layout options for mobile devices.

Mobile - Potrait (375) - 1 column
Mobile - Potrait (375) - 2 columns
Mobile 1 col image
Mobile 2 col image
Mobile - Potrait (375) - 3 columns
Mobile - Potrait (375) - 6 columns
Mobile 3 col image
Mobile 6 col image
Mobile - Landscape (480) - 2 columns
Mobile box image 1
Mobile - Landscape (480) - 3 columns
Mobile box image 2
Mobile - Landscape (480) - 6 columns
Mobile box image 3