jobiqo-cl/lib/es/src/components/02-atoms/06-layout/04-grid/Cell.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';

/**
 * Renders a grid cell inside a container of display "grid".
 *
 * This component was taken / inspired by https://styled-css-grid.js.org/
 */
/**
 * A CSS Grid individual cell.
 */
const Cell = styled.div `
  height: 100%;
  min-width: 0;
  grid-column-end: ${({ width = 1 }) => `span ${width}`};
  grid-row-end: ${({ height = 1 }) => `span ${height}`};

  ${({ left }) => left && `grid-column-start: ${left}`};
  ${({ top }) => top && `grid-row-start: ${top}`};

  ${({ center }) => center && `text-align: center`};

  ${({ area }) => area && `grid-area: ${area}`};

  ${ /* prettier-ignore */({ middle }) => middle && `
    display: inline-flex;
    flex-flow: column wrap;
    justify-content: center;
    justify-self: stretch;
  `};
`;

export default Cell;
export { Cell };