$flex-grid: (
  'pack': (
    'name': 'pack',
    'map': map-merge((), $breakpoints),
    'responsive': true,
    'options': (
      'extent': (
        'property': 'width',
        'values': (
          'narrowest': 20%,
          'narrower': 30%,
          'narrow': 40%,
          'medium': 60%,
          'wide': 80%,
          'wider': 90%,
          'widest': 100%
        )
      )
    )
  ),
  'tier': (
    'name': 'tier',
    'map': map-merge((), $containers),
    'responsive': true,
    'options': (
      'content': (
        'property': 'align-content',
        'values': (
          'start': 'flex-start',
          'end': 'flex-end',
          'center': 'center',
          'stretch': 'stretch',
          'evenly': 'space-evenly',
          'between': 'space-between',
          'around': 'space-around'
        )
      ),
      'items': (
        'property': 'align-items',
        'values': (
          'start': 'flex-start',
          'end': 'flex-end',
          'center': 'center',
          'stretch': 'stretch',
          'baseline': 'baseline'
        )
      ),
      'justify': (
        'property': 'justify-content',
        'values': (
          'start': 'flex-start',
          'end': 'flex-end',
          'center': 'center',
          'stretch': 'stretch',
          'evenly': 'space-evenly',
          'between': 'space-between',
          'around': 'space-around'
        )
      ),
      'flow': (
        'property': 'flex-flow',
        'values': (
          'row-wrap': 'row wrap',
          'row-reverse-wrap': 'row-reverse wrap',
          'row-wrap-reverse': 'row wrap-reverse',
          'row-reverse-wrap-reverse': 'row-reverse wrap-reverse',
          'row-nowrap': 'row nowrap',
          'row-reverse-nowrap': 'row-reverse nowrap',
          'column-wrap': 'column wrap',
          'column-reverse-wrap': 'column-reverse wrap',
          'column-wrap-reverse': 'column wrap-reverse',
          'column-reverse-wrap-reverse': 'column-reverse wrap-reverse',
          'column-nowrap': 'column nowrap',
          'column-reverse-nowrap': 'column-reverse nowrap'
        )
      )
    )
  ),
  'cell': (
    'name': 'cell',
    'map': map-merge((), $cells),
    'responsive': true,
    'options': (
      'index': (
        'property': 'order',
        'values': (
          'first': -1,
          'last': 99,
          '0': 0,
          '1': 1,
          '2': 2,
          '3': 3,
          '4': 4,
          '5': 5,
          '6': 6,
          '7': 7,
          '8': 8,
          '9': 9
        )
      ),
      'push': (
        'property': 'transform',
        'wrapper': 'translateX(%var%)',
        'values': percentages(map-merge((), $cells), false)
      ),
      'pull': (
        'property': 'transform',
        'wrapper': 'translateX(%var%)',
        'values': percentages(map-merge((), $cells), true)
      ),
      'drop': (
        'property': 'transform',
        'wrapper': 'translateY(%var%)',
        'values': percentages(map-merge((), $cells), false)
      ),
      'lift': (
        'property': 'transform',
        'wrapper': 'translateY(%var%)',
        'values': percentages(map-merge((), $cells), true)
      ),
      'lead': (
        'property': 'margin-top',
        'values': (
          '0': 0,
          '0\\.5': 15px,
          '1': 30px,
          '1\\.5': 45px,
          '2': 60px,
          '3': 90px,
          '4': 120px,
          '5': 150px,
          '6': 180px,
          '7': 210px,
          '8': 240px,
          '9': 270px
        )
      ),
      'rear': (
        'property': 'margin-bottom',
        'values': (
          '0': 0,
          '0\\.5': 15px,
          '1': 30px,
          '1\\.5': 45px,
          '2': 60px,
          '3': 90px,
          '4': 120px,
          '5': 150px,
          '6': 180px,
          '7': 210px,
          '8': 240px,
          '9': 270px
        )
      )
    )
  ),
  'gutter': (
    'name': 'gutters',
    'size': 15px,
    'axis': 'x' // x, y, any other value will be translated to both
  )
) !default;

@include make-flex-grid-pack($flex-grid);
@include make-flex-grid-tier($flex-grid);
@include make-flex-grid-cell($flex-grid);