@baransu/react-styled-flexboxgrid/src/components/Grid.js

Grid system based on styled-components and flexbox for React

import PropTypes from "prop-types";
import styled from "@emotion/styled";
import { css } from "@emotion/core";

import config, { DIMENSION_NAMES } from "../config";

const fluid = p =>
  p.fluid
    ? css``
    : css`
        ${DIMENSION_NAMES.map(t => {
          return config(p).container[t]
            ? `
              @media ${config(p).media[t]} {
                width: ${config(p).container[t]}rem;
              }
            `
            : ``;
        }).join("\n")}
      `;

const padding = p =>
  css`
    ${config(p).outerMargin}rem;
  `;

const Grid = styled.div`
  margin-right: auto;
  margin-left: auto;
  padding-right: ${padding}
  padding-left: ${padding}
  ${fluid}
`;

Grid.displayName = "Grid";

Grid.propTypes = {
  fluid: PropTypes.bool,
  children: PropTypes.node
};

export default Grid;