html - 由 css 网格驱动的“复杂”矩阵样式网格是否可能?
问题描述
我目前正在尝试使用 css 网格在 Material-UI 中实现以下网格结构:
我已经使用 Material-UI 创建了一个 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 网格中是否可行?
解决方案
正如@Michael_B 所说,网格区域必须是矩形的。因此,不可能创建更复杂的布局。
推荐阅读
- unity3d - 在 Windows 10 平板电脑上使用 MRTK
- spring-boot - 不将额外的参数从控制器传递到模板
- python - RuntimeError / 第 22 行:找不到对象“测试”
- java - 用 Java 实现 Dijkstra 和 Graphs
- arduino - 如何设置 Arduino 重置功能以仅读取 DHT11 传感器
- javascript - 如何在 Typescript 中检查自定义接口类型
- asp.net-core - 尝试发布 blazor wasm 应用程序,但单声道运行时和类库不同步
- python - Python 库安装失败
- node.js - 在 Node.js 中将对象传递给 EJS
- swift - 为什么 UIStackView 中的 UILabel 在重用时会失去高度?