带有CSS网格模板的列和行使第一行消失或未调整大小[关闭]

Question

关闭。这个问题是off-topic。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

已关闭1分钟前。

我正在尝试创建一个网格，该网格是30格乘30格，每个像素为120px。但是，我编写代码时似乎无法获得超过4x4的工作。

以下是4x4的codepen链接：4x4 Demo

这里是5x5的codepen链接：5x5 Demo

我尝试了CSS代码的各种组合来尝试使之正常工作。

这是一个变体，但无法正确呈现，不会显示第一行，它们不再是正方形格式。此外，第二行与其余的120px框不一致。

        gridTemplateColumns: "repeat(30, 120px)",
        gridTemplateRows: "120px",

Answer 1

我设法通过使用代码使它起作用：

        style = {
        display: "grid",
        gridTemplateColumns: "repeat(" + this.size + ", 120px)",
        gridTemplateRows: "auto",
        justifyContent: "center"
    };