Возможна ли "сложная" сетка в виде матрицы с сеткой CSS? - PullRequest
Новая
       15

Возможна ли "сложная" сетка в виде матрицы с сеткой CSS?

1 голос
/ 26 июня 2019

В настоящее время я пытаюсь получить следующую структуру сетки в Material-UI с сеткой CSS:

Желаемая сложная компоновка

Я уже создал сетку CSS сМатериал-интерфейс, который выглядит следующим образом:

Текущий макет

Этот код принадлежит ему: 

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 => ({
    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 (
        <Container component="main" maxWidth="xs">
            <div className={classes.container}>
                <div />
                <div className={clsx(classes.topLabel, classes.align)}>
                    Text x-axis
                </div>
                <div className={clsx(classes.sideLabel, classes.align)}>
                    Text y-axis
                </div>

                <div />
                <div />
                <div className={clsx(classes.purple, classes.align)}>1</div>
                <div className={clsx(classes.purple, classes.align)}>2</div>
                <div className={clsx(classes.purple, classes.align)}>3</div>
                <div className={clsx(classes.purple, classes.align)}>4</div>

                <div className={clsx(classes.orange, classes.align)}>A</div>
                <div className={clsx(classes.lightGrey, classes.align)}>4</div>
                <div className={clsx(classes.lightGrey, classes.align)}>4</div>
                <div className={clsx(classes.lightGrey, classes.align)}>4</div>
                <div className={clsx(classes.lightGrey, classes.align)}>4</div>

                <div className={clsx(classes.orange, classes.align)}>B</div>
                <div className={clsx(classes.lightGrey, classes.align)}>3</div>
                <div className={clsx(classes.lightGrey, classes.align)}>3</div>
                <div className={clsx(classes.lightGrey, classes.align)}>3</div>
                <div className={clsx(classes.lightGrey, classes.align)}>3</div>

                <div className={clsx(classes.orange, classes.align)}>C</div>
                <div className={clsx(classes.lightGrey, classes.align)}>2</div>
                <div className={clsx(classes.lightGrey, classes.align)}>2</div>
                <div className={clsx(classes.lightGrey, classes.align)}>2</div>
                <div className={clsx(classes.lightGrey, classes.align)}>2</div>

                <div className={clsx(classes.orange, classes.align)}>D</div>
                <div className={clsx(classes.lightGrey, classes.align)}>1</div>
                <div className={clsx(classes.lightGrey, classes.align)}>1</div>
                <div className={clsx(classes.lightGrey, classes.align)}>1</div>
                <div className={clsx(classes.lightGrey, classes.align)}>1</div>
            </div>
        </Container>
    );
}

export default ExamplePage;

Есть ли у кого-нибудь такжеИдея о том, как программно установить синюю точку где-нибудь в сетке?Я не уверен, возможно ли это вообще в сетке css?

...