MaxMilton/ekscss

/* Container */

.con {
  max-width: ${x.containerWidthMax};
  margin-right: auto;
  margin-left: auto;
  padding-right: ${x.gutterCol};
  padding-left: ${x.gutterCol};

  @media ${x.media.l} {
    padding-right: calc(${x.gutterCol} * 2);
    padding-left: calc(${x.gutterCol} * 2);
  }
}

.narrow {
  max-width: ${x.containerNarrowWidthMax};
}

.fluid {
  max-width: unset;
}

/* Grid base */

.grid {
  display: grid;
  grid-gap: ${x.gutterRow} ${x.gutterCol};

  ${x.autoRows !== 'auto' && xcss`
    grid-auto-rows: ${x.autoRows};
  `}
  ${x.autoCols !== 'auto' && xcss`
    grid-auto-columns: ${x.autoCols};
  `}

  @media ${x.media.l} {
    grid-gap: ${x.gutterRowLarge} ${x.gutterColLarge};
  }
}

/*
  .<RESPONSIVE><BASE><MOD>

  RESPONSIVE
        = (no prefix) default small
    ns- = not small screen breakpoint; anything medium or bigger
    m- = medium screen breakpoint
    l- = large screen breakpoint

  BASE
    gx = number of columns in grid
    gy = number of rows in grid
    gc = starting column
    gr = starting row
    gw = grid item width
    gh = grid item height

  MOD
    cols = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    rows = 1, 2, 3, 4, 5, 6

*/

${x.fn.map(x.colSteps, (step, i) => xcss`
  .gx${step} { grid-template-columns: repeat(${step}, ${x.itemSize}); }
  .gc${step} { grid-column-start: ${step}; }
  .gw${step} { grid-column-end: span ${step}; }
`)}

${x.fn.map(x.rowSteps, (step, i) => xcss`
  .gy${step} { grid-template-rows: repeat(${step}, auto); }
  .gr${step} { grid-row-start: ${step}; }
  .gh${step} { grid-row-end: span ${step}; }
`)}

${x.fn.each(x.media, (bp, query) => xcss`
  @media ${query} {
    .${bp}-gx-auto { grid-template-columns: auto; }

    ${x.fn.map(x.colSteps, (step, i) => xcss`
      .${bp}-gx${step} { grid-template-columns: repeat(${step}, ${x.itemSize}); }
      .${bp}-gc${step} { grid-column-start: ${step}; }
      .${bp}-gw${step} { grid-column-end: span ${step}; }
    `)}

    ${x.fn.map(x.rowSteps, (step, i) => xcss`
      .${bp}-gy${step} { grid-template-rows: repeat(${step}, auto); }
      .${bp}-gr${step} { grid-row-start: ${step}; }
      .${bp}-gh${step} { grid-row-end: span ${step}; }
    `)}
  }
`)}