Gap — светлое будущее для отступов в Flexbox (как в Grid)

опечатка

cardWrapper: {
    padding: theme.spacing.unit * 2,

Gap — светлое будущее для отступов в Flexbox (как в Grid)

const styles = theme => ({
    cardContainer:{ 
        display: 'flex',
        flexDirection: "row",
        flexWrap: "wrap",
        margin:  theme.spacing.unit * 2 * -1,
    },
cardWrapper: {
    padding: theme.spacing.unit * 3 / 2,
    boxSizing: "border-box",
    flexShrink: 0,
    flexGrow: 1,
    [theme.breakpoints.up('xs')]: {
      width: `${(100 / 1)}%`,
    },
    [theme.breakpoints.up('sm')]: {
      width: `${(100 / 2)}%`,
    },
    [theme.breakpoints.up('md')]: {
      width: `${(100 / 3)}%`,
    },
    [theme.breakpoints.up('lg')]: {
      width: `${(100 / 4)}%`,
    },
    [theme.breakpoints.up('xl')]: {
      width: `${(100 / 5)}%`,
    },
  },
card: {
    height: "100%",
    display: 'flex',
    flexDirection: "column",
  },
},

Gap — светлое будущее для отступов в Flexbox (как в Grid)

Вероятно вы недавно в верстке. Давно уже придумали кроссбраузерные паттерны на этот счет. Не стоит пугать людей.

.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}
.flex-item {
    width: calc(100% / 3);
    margin: 0.5rem;
}