Как создать свою сетку-grid без CSS in JS?

Question

[lexstile]

Основная проблема - приходится все классы перечислять вручную (в компоненте).
Есть ли способ формировать подобное динамически? (особенно это касается выравнивания в компоненте Row)

const Row = ({
  children,
  verticalAlign,
  xsVerticalAlign,
  smVerticalAlign,
  mdVerticalAlign,
  lgVerticalAlign,
  xlVerticalAlign,
  ...rest
}) => (
  <div
    className={cx(styles.row, {
      [styles[`v-align-${verticalAlign}`]]: !!verticalAlign,
      [styles[`v-align-xs-${xsVerticalAlign}`]]: !!xsVerticalAlign,
      [styles[`v-align-sm-${smVerticalAlign}`]]: !!smVerticalAlign,
      [styles[`v-align-md-${mdVerticalAlign}`]]: !!mdVerticalAlign,
      [styles[`v-align-lg-${lgVerticalAlign}`]]: !!lgVerticalAlign,
      [styles[`v-align-xl-${xlVerticalAlign}`]]: !!xlVerticalAlign,
    })}
    {...rest}
  >
    {children}
  </div>
);
const Col = ({ xl, lg, md, sm, xs, children }) => (
  <div
    className={cx(styles.col, {
      [styles[`col-xs-${xs}`]]: !!xs,
      [styles[`col-sm-${sm}`]]: !!sm,
      [styles[`col-md-${md}`]]: !!md,
      [styles[`col-lg-${lg}`]]: !!lg,
      [styles[`col-xl-${xl}`]]: !!xl,
    })}
  >
    {children}
  </div>
);