JSPM

<Grid
  breakpoints={[0, 400, 800, 1200]}
  colspan={6}
  left={"2vw"}
  right={"2vw"}
  top={"2vw"}
  bottom={"2vw"}
  gutterX={"2vw"}
  gutterY={"2vw"}
  control
>
  <Box cols={[6, 6, 3]}>
    <h1>Hello World!</h1>
  </Box>
  <Box cols={[6, 6, 3]}>
    <Box cols={[4, 4, 2]} left={[2, 2, 1]}>
      <h2>Stop</h2>
    </Box>
    <Box cols={[4, 4, 2]} left={[2, 2, 1]}>
      <h2>Wars!</h2>
    </Box>
  </Box>
</Grid>

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

import React from "react";
import { Grid, Box } from "react-raster";
import Link from "next/link";

const BoxLink = (props) => (
  <Link href={props.href} passHref>
    <Box tag="a" {...props}>
      {props.children}
    </Box>
  </Link>
);

const ExampleTeaser = () => (
  <BoxLink href="/article" cols={[6, 6, 3]}>
    <img src="/image" alt="Image" />
    <h2>I am a Teaser!</h2>
    <p>Click me, to read an interesting article.</p>
  </BoxLink>
);

import React from "react";
import { Grid, Box } from "react-raster";
import { motion } from "framer-motion";

const containerVariants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.3,
    },
  },
};

const teaserVariants = {
  hidden: { opacity: 0 },
  show: { opacity: 1 },
};

const ExampleTeaser = () => (
  <Box component={<motion.a variants={teaserVariants} />}>
    <h2>I am the child of the Motion-Link!</h2>
  </Box>
);

const ExampleGrid = () => {
  <Grid
    component={
      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="show"
      />
    }
  >
    <ExampleTeaser />
    <ExampleTeaser />
    <ExampleTeaser />
  </Grid>;
};

import React from "react";
import { Grid, Box } from "react-raster";

const ChildComponent = () => {
  const { breakpoint } = useRaster();
  return <h1>The current breakpoint is {breakpoint.value}</h1>;
};

export default ChildComponent;

import React from "react";
import { Grid, Box } from "react-raster";

const MyCustomChildBox = ({ children }) => (
  <Box className="Testgrid__ChildBox" cols={6} top={[2, 1]} alignY={"center"}>
    {children}
  </Box>
);

const Example = () => (
  <Grid
    className="Testgrid"
    tag="section"
    breakpoints={[0, 432, 768, 1024, 1200, 1400]}
    colspan={12}
    left={["3vw", "3vw", "3vw", "2vw"]}
    right={["3vw", "3vw", "3vw", "2vw"]}
    top={"10vw"}
    bottom={"20vw"}
    gutterX={["1.5vw", "1.5vw", "2vw"]}
    gutterY={"3vw"}
    control={process.env.NODE_ENV !== "production"}
    controlColor="rgba(0, 100, 255, 0.1)"
    // use the "bp-"-classes to limit styles to certain breakpoints…
    style={`
            &&.bp-0, 
            &&.bp-432, 
            &&.bp-768 {
                background: red;
            }
            &&.bp-1024, 
            &&.bp-1200, 
            &&.bp-1400 {
                background: blue;
            }
        `}
    // the "bp-"-classes have also an index-based indication
    style={`
            &&.bp-1, 
            &&.bp-2, 
            &&.bp-3 {
                background: red;
            }
            &&.bp-4, 
            &&.bp-5, 
            &&.bp-6 {
                background: blue;
            }
        `}
    // … or use an array of strings, to address certain breakpoints
    style={[
      `background: red;`,
      `background: red;`,
      `background: red;`,
      `background: blue;`, // from width 1024 on, the background is blue
    ]}
  >
    <Box
      className="Testgrid__Box"
      tag="article"
      cols={[12, 12, 6]}
      top={1}
      left={[0, 0, 3]}
      style={`
              background: pink;

              .bp-1024 &&, .bp-1200 &&, .bp-1400 && {
                background: red;
              }

              ::after {
                content: 'Hallo!';
                position: absolute;
                left: 50%;
                top: 50%;
              }
            `}
    >
      <MyCustomChildBox>
        <h2>Hello</h2>
      </MyCustomChildBox>

      <MyCustomChildBox>
        <h2>World</h2>
      </MyCustomChildBox>

      <Box
        className="Testgrid__Image"
        tag="img"
        cols={12}
        top={1}
        attr={{
          src: "https://my-image-source.io",
          alt: "A box can be an image, too!",
        }}
      />
    </Box>
  </Grid>
);