widthToColumns = (width) => {
  if (Array.isArray(width)) {
    return width.map(widthToColumns)
  }

  if (
    width !== null &&
    typeof width === 'object' &&
    Object.keys(width).length > 0
  ) {
    const acc = {}
    for (const key in width) {
      acc[key] = `repeat(auto-fit, minmax(${px(width[key])}, 1fr))`
    }
    return acc
  }

  if (width != null) {
    return `repeat(auto-fit, minmax(${px(width)}, 1fr))`
  }

  return null
}
These helper functions are modified versions of the amazing work done by rebass library abd chakra-ui
https://github.com/rebassjs/rebass/blob/master/packages/layout/src/index.js