The Ticketmaster grid system is made up of three primary elements: columns, gutters and margins.
Content is placed in areas of the screen that contain columns. Columns “flex” or adjust to the size of the screen.
The breakpoint range determines the number of columns, gutter width and margin width for a predetermined set of screen sizes.
Prop | Screensize | Margins | Gutters | Columns |
---|---|---|---|---|
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 |
Use the 24px grid for screen sizes 768 and up.
Use the 16px grid for screen sizes 767 and below.
There are some easy grid system guidelines to follow when laying out a page design.
Content never appears in the margins.
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.
Although the grid system allows for many possible layout configurations, the following are some of the most common options for TM Product Design.
There are many possible desktop configuration options. Here are a couple of common applications.
Here are some of the most common layout options for tablet devices..
Here are some of the most typical layout options for mobile devices.