react-flex-grid-system/src/components/Grid.js

Grid system based on styled-components and flexbox for React

import PropTypes from "prop-types";
import styled, { css } from "styled-components";

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

const Grid = styled.div`
  margin-right: auto;
  margin-left: auto;

  ${(p) =>
    !p.fluid &&
    css`
      ${DIMENSION_NAMES.map(
        (t) =>
          config(p).container[t] &&
          config(p).media[t]`
        width: ${(p) => config(p).container[t]}rem;
        padding-right: ${(p) => config(p).outerMargin[t]}rem;
        padding-left: ${(p) => config(p).outerMargin[t]}rem;
      `
      )}
    `}
  ${(p) =>
    css`
      ${DIMENSION_NAMES.map(
        (t) =>
          config(p).outerMargin[t] &&
          config(p).media[t]`
        padding-right: ${(p) => config(p).outerMargin[t]}rem;
        padding-left: ${(p) => config(p).outerMargin[t]}rem;
      `
      )}
    `}
`;

Grid.displayName = "Grid";

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

export default Grid;