Javascript 垂直绘制克隆元素

我尝试使用java脚本多次绘制一个形状，在我的例子中，我正在绘制一个圆。我创建了一个基于选择器复制元素的函数，但是当它再次将形状绘制到屏幕上时，它会水平地绘制它，我想让它垂直地绘制它

我认为问题在于函数每次都在同一个位置追加元素，所以它会水平绘制（如果我错了，请纠正我）

这是我的代码：

函数duplicateCircle（）{
//设num=1
让clone=document.querySelector（'.circle'）.cloneNode（true）；
//clone.setAttribute（'id'，'cmt${++num}`）
document.querySelector（“#grph”）.appendChild（克隆）；
}

.container{
显示：网格；
宽度：100%；
高度：45vw；
保证金：自动；
间隙：25px；
边框：2倍纯红；
网格模板列：重复（2）；
网格模板行：重复（6,1fr）；
网格模板区域：
“cmd cmd grph grph grph grph”
“cmd cmd grph grph grph grph”
“cmd cmd grph grph grph grph”
“cmd cmd grph grph grph grph”
“cmd cmd grph grph grph grph”
“写grph grph grph grph grph”；
}
.盒子{
显示器：flex；
/*弯曲方向：行*/
证明内容：中心；
边框：5px纯黑；
}
.圆圈{
高度：50px；
宽度：50px；
背景色：蓝紫色；
边界半径：50%；
边框：3倍纯黑；
}
#命令{网格区域：cmd；}
#grph{网格区域：grph；}
#写入{网格区域：写入；}

画

使用显示：flex带有弹性方向：列。应用此css：

#grph {
grid-area: grph;
display: flex;
flex-direction: column;
align-items:center;
justify-content: flex-start;
}

试着改变这个

.box {
  display-direction: column;
  align-items: center;
}

非常欢迎：）。如果你喜欢，请接受这个答案。