@barguide/style-guide/src/variables/grid.ts

BarGuide.io | CSS Style Guide

/**
 * @name grid
 * @external https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179
 *
 * @description This gives us a ton of measurements out of the box, anything
 * beyond this we can just hard code or bubble up into the global CSS
 */
const grid = {
  '0': 0,
  '1xxs': 2,
  '1xs': 4,
  '1x': 8,
  '2xs': 12,
  '2x': 16,
  '3xs': 20,
  '3x': 24,
  '4xs': 28,
  '4x': 32,
  '5xs': 36,
  '5x': 40,
  '6xs': 44,
  '6x': 48,
  '7xs': 52,
  '7x': 56,
  '8xs': 60,
  '8x': 64,
  '9xs': 68,
  '9x': 72,
  '10xs': 76,
  '10x': 80
};

export { grid };