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.

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

1440 - 768 px

This breakpoint range covers all desktop and tablet use cases with margins and gutters set at 24px.

desktop and tablet use cases with margins and gutters set at 24px
Code
<Container>
  <Row>
    <Column
      large={12}
      medium={12}
      xLarge={12}
     />
  </Row>
  <Row>
    <Column
      large={6}
      medium={6}
      small={6}
      xLarge={6}
     />
    <Column
      large={6}
      medium={6}
      small={6}
      xLarge={6}
     />
  </Row>
  <Row>
    <Column
      large={4}
      medium={4}
      small={4}
      xLarge={4}
     />
    <Column
      large={4}
      medium={4}
      small={4}
      xLarge={4}
     />
    <Column
      large={4}
      medium={4}
      small={4}
      xLarge={4}
     />
  </Row>
  <Row>
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
  </Row>
  <Row>
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
  </Row>
  <Row>
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
  </Row>
</Container>
Min width:
Margin width:
Gutter width:
1440 px
24 px
24 px

767 - 375 px

This breakpoint range covers all mobile use cases with margins and gutters set at 16px. The following are a couple of the most common mobile configurations.

mobile use cases with margins set at 16px
mobile use cases with margins and gutters set at 16px
Code
<Container>
  <Row>
    <Column
      large={12}
      medium={12}
      xLarge={12}
     />
  </Row>
  <Row>
    <Column
      large={6}
      medium={6}
      small={6}
      xLarge={6}
     />
    <Column
      large={6}
      medium={6}
      small={6}
      xLarge={6}
     />
  </Row>
</Container>
Min width:
Gutter width:
375 px
16 px
Min width:
Margin width:
Gutter width:
375 px
16 px
16 px

> 1440 px

This depicts how the grid behaves at resolutions greater than 1440px.

all resolutions greater than 1440 px use cases
Code
<Container>
  <Row>
    <Column
      large={12}
      medium={12}
      xLarge={12}
     />
  </Row>
  <Row>
    <Column
      large={6}
      medium={6}
      small={6}
      xLarge={6}
     />
    <Column
      large={6}
      medium={6}
      small={6}
      xLarge={6}
     />
  </Row>
  <Row>
    <Column
      large={4}
      medium={4}
      small={4}
      xLarge={4}
     />
    <Column
      large={4}
      medium={4}
      small={4}
      xLarge={4}
     />
    <Column
      large={4}
      medium={4}
      small={4}
      xLarge={4}
     />
  </Row>
  <Row>
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
    <Column
      large={3}
      medium={3}
      small={3}
      xLarge={3}
     />
  </Row>
  <Row>
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
    <Column
      large={2}
      medium={2}
      small={2}
      xLarge={2}
     />
  </Row>
  <Row>
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
    <Column
      large={1}
      medium={1}
      small={1}
      xLarge={1}
     />
  </Row>
</Container>