Grid layout

grid-layout.tsx

import styled, { css } from "styled-components";

interface IProps {
  width?: number;
  offset?: number;
  align?: string;
  justify?: string;
  horizontalGutter?: number;
  verticalGutter?: number;
}

const defaultSpace = 0;
const basis = 100 / 24;

const getSpace = (prop: number): number => prop / 2;

const offset = css<IProps>`
  margin-left: ${({ offset }) => (offset ? offset * basis : 0)}%;
`;

const defaultWidth = css`
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
`;

const columnsWidth = css<IProps>`
  flex-basis: ${({ width }) => (width ? width * basis : 100)}%;
  // max-width: ${({ width }) => (width ? width * basis : 100)}%;
`;

const width = css<IProps>`
  ${({ width }) => (!width ? defaultWidth : columnsWidth)}
`;

const marginSpacing = css<IProps>`
  margin-right: -${({ horizontalGutter }) => (horizontalGutter ? getSpace(horizontalGutter) : getSpace(defaultSpace))}px;
  margin-left: -${({ horizontalGutter }) => (horizontalGutter ? getSpace(horizontalGutter) : getSpace(defaultSpace))}px;
  margin-top: -${({ verticalGutter }) => (verticalGutter ? getSpace(verticalGutter) : getSpace(defaultSpace))}px;
  margin-bottom: -${({ verticalGutter }) => (verticalGutter ? getSpace(verticalGutter) : getSpace(defaultSpace))}px;
`;

const paddingSpacing = css<IProps>`
  padding-right: ${({ horizontalGutter }) =>
    horizontalGutter ? getSpace(horizontalGutter) : getSpace(defaultSpace)}px;
  padding-left: ${({ horizontalGutter }) =>
    horizontalGutter ? getSpace(horizontalGutter) : getSpace(defaultSpace)}px;
  padding-top: ${({ verticalGutter }) =>
    verticalGutter ? getSpace(verticalGutter) : getSpace(defaultSpace)}px;
  padding-bottom: ${({ verticalGutter }) =>
    verticalGutter ? getSpace(verticalGutter) : getSpace(defaultSpace)}px;
`;

export const Grid = styled.div`
  overflow: hidden;
`;

export const Row = styled.div<IProps>`
  display: flex;
  align-items: ${({ align }) => (align ? align : "normal")};
  justify-content: ${({ justify }) => (justify ? justify : "normal")};
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;

  ${marginSpacing}

  & > div {
    ${paddingSpacing}
  }
`;

export const Col = styled.div<IProps>`
  flex: 0 0 auto;
  box-sizing: border-box;

  ${width}

  ${offset}
`;