title: Is a "complex" matrix style grid powered by a css grid possible?
body: <p>I am currently trying to achieve the following grid structure in Material-UI with a css grid:</p>
  
  <p><a href="https://ibb.co/yBgyH0G" rel="nofollow noreferrer">Desired complex layout</a></p>
  
  <p>I already created a css grid with Material-UI that looks like this:</p>
  
  <p><a href="https://ibb.co/pws5fnx" rel="nofollow noreferrer">Current layout</a></p>
  
  <p>This is the code belonging to it:</p>
  
  <pre><code>import React from "react";
  import clsx from "clsx";
  import { makeStyles } from "@material-ui/core/styles";
  import { Container } from "@material-ui/core";
  
  const useStyles = makeStyles(theme =&gt; ({
      container: {
          marginTop: theme.spacing(8),
          display: "grid",
          gridTemplateColumns: "repeat(6, 56px)",
          gridAutoRows: "56px",
          gridGap: theme.spacing(0.5),
      },
      purple: {
          background: "#e502f9",
          color: "#ffffff",
          height: "100%",
      },
      orange: {
          background: "#f98202",
          color: "#ffffff",
          height: "100%",
          gridColumnStart: "2",
      },
      lightGrey: {
          background: "#d8d8d8",
          height: "100%",
      },
      topLabel: {
          gridColumnStart: "3",
          gridColumnEnd: "span 4",
      },
      sideLabel: {
          gridRowStart: "3",
          gridRowEnd: "span 4",
          writingMode: "vertical-rl",
          transform: "rotate(180deg)",
      },
      align: {
          alignItems: "center",
          display: "flex",
          justifyContent: "center",
          textAlign: "center",
      },
  }));
  
  function ExamplePage() {
      const classes = useStyles();
  
      return (
          &lt;Container component="main" maxWidth="xs"&gt;
              &lt;div className={classes.container}&gt;
                  &lt;div /&gt;
                  &lt;div className={clsx(classes.topLabel, classes.align)}&gt;
                      Text x-axis
                  &lt;/div&gt;
                  &lt;div className={clsx(classes.sideLabel, classes.align)}&gt;
                      Text y-axis
                  &lt;/div&gt;
  
                  &lt;div /&gt;
                  &lt;div /&gt;
                  &lt;div className={clsx(classes.purple, classes.align)}&gt;1&lt;/div&gt;
                  &lt;div className={clsx(classes.purple, classes.align)}&gt;2&lt;/div&gt;
                  &lt;div className={clsx(classes.purple, classes.align)}&gt;3&lt;/div&gt;
                  &lt;div className={clsx(classes.purple, classes.align)}&gt;4&lt;/div&gt;
  
                  &lt;div className={clsx(classes.orange, classes.align)}&gt;A&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;4&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;4&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;4&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;4&lt;/div&gt;
  
                  &lt;div className={clsx(classes.orange, classes.align)}&gt;B&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;3&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;3&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;3&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;3&lt;/div&gt;
  
                  &lt;div className={clsx(classes.orange, classes.align)}&gt;C&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;2&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;2&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;2&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;2&lt;/div&gt;
  
                  &lt;div className={clsx(classes.orange, classes.align)}&gt;D&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;1&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;1&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;1&lt;/div&gt;
                  &lt;div className={clsx(classes.lightGrey, classes.align)}&gt;1&lt;/div&gt;
              &lt;/div&gt;
          &lt;/Container&gt;
      );
  }
  
  export default ExamplePage;
  </code></pre>
  
  <p>Does anybody also has an idea on how to programatically set the blue dot somewhere in the grid? I am not sure if this is possible at all in a css grid?</p>