grid-demo-emotion

index.js

import styled, { css } from "react-emotion";

export const Flex = styled("div")`
  display: flex;
  flex-wrap: wrap;
// all the below styles can be customized using prop values
  flex-direction: ${props => props.direction || "row"};
  justify-content: ${props => props.justify || "space-between"};
  font-family: ${props => props.font || "roboto"};
  font-size: ${props => props.fontSize || "medium"};
  background-color: ${props => props.color};
`;

export const DataWrapper = styled("div")`
  width: 30%;
  height: 30%;
  margin: 1%;
  padding: 0.5%;
  background-color: white;
  border-radius: 3%;
`;