responsive grid

Grid.tsx

import { css } from "@emotion/react";
import styled from "@emotion/styled";

export const breakpoints = {
  xs: 0,
  sm: 460,
  md: 820,
  lg: 1350,
  xl: 1880,
};

export const Grid = styled.div<{
  container?: boolean;
  item?: boolean;
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
}>`
  ${(p) =>
    p.container &&
    css`
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    `}

  ${(p) =>
    p.item &&
    ["xs", "sm", "md", "lg", "xl"]
      .filter((size) => p[size as keyof typeof p] !== undefined)
      .map(
        (size) =>
          css`
            @media (min-width: ${breakpoints[
                size as keyof typeof breakpoints
              ]}px) {
              display: ${p[size as keyof typeof p] === 0 ? "none" : "block"};
              grid-column: span ${p[size as keyof typeof p]};
            }
          `
      )}
`;