Css 创建动态网格布局

我的目标是在React中创建nxn井字游戏。现在我有了

板

类包装方块。 这是css：

.board {
  display: grid;
  width: 25rem;
  height: 25rem;
  **grid-template: repeat(3, 1fr) / repeat(3, 1fr);**
     
}
.square {
  border: 1px solid black;
  display: grid;
  place-items: center;
  font-size: 40px;
}

---

在.board css中，我如何使其动态而不是3-例如，如果网格为4X4，则我必须重复（4,1fr）等…如何使其适用于所有尺寸？

更新

如果您特别想要React解决方案，我为您准备了一个演示

import React，{useState，useffect，useRef}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[gridSize，setGridSize]=useState（4）；
const boardRef=useRef（空）；
useffect（（）=>{
boardRef.current.style.setProperty（“--grid size”，gridSize）；
}，[gridSize]）；
常量createSquares=（）=>{
设html=[]；
for（设i=0；i

.board{
--网格尺寸：4；
/*从4x4开始*/
显示：网格；
宽度：25雷姆；
高度：25雷姆；
网格模板：重复（变量（--网格大小），1fr）/重复（变量（--网格大小），1fr）；
}
.广场{
边框：1px纯黑；
显示：网格；
放置项目：中心；
字体大小：40px；
}
.我的钮扣{
填充：1rem；
位置：绝对位置；
右：0；
排名：0；
}

您必须传递值才能重复，它如何知道必须生成什么

nxn

框？取决于

宽度

和

高度

？感谢您的回复，没有jquery如何实现这一点？纯css/react@Kaki6876我使用的是原生JavaScript，没有jQuery。谢谢，这很有帮助！