Javascript CSS网格框是否扩展以适应动态放置的内容？

我是CSS网格新手，遇到了一些困难。在页面加载后，我将

div

动态添加到CSS网格框（一个

div

）中，但网格框没有扩展以反映它们（具体地说，我将

div

排列成一个圆圈）。附加的

div

相对于网格框绝对定位。相反，它们似乎漂浮在它的外面。我想做的事可能吗？如果是这样，我的做法有什么错误

下面是我写的一个代码笔，它描述了我正在尝试做的事情，应该可以说明我遇到的问题：。在代码笔中，左侧的红色框应展开，以便字母圈位于其中

这是HTML

帕萨帕拉布拉
用户输出
用户输入

还有SCS

正文{
背景：皇家蓝；
保证金：0；
身高：100%；
标题{
网格区域：标题；
背景#1ab048；
}
页脚{
网格区域：页脚；
背景：#FCE1E5；
}
}
#大电网{
显示：网格；
位置：相对位置；
网格模板列：400px 10px 1fr；
网格模板区域：“letterDisplay.userInteraction”；
}
#用户交互{
背景#BC7A00；
显示：子网格；
网格区域：用户交互；
网格模板行：1fr 10px 1fr；
网格模板列：1fr；
网格模板区域：“userOutput.userInput”；
}
#用户输出{
网格区域：用户输出；
背景：灰色；
边框：纯黑1px；
}
#用户输入{
网格区域：用户输入；
}
#字母显示{
网格区域：字母显示；
位置：相对位置；
背景：#FF0000；
div{
高度：40px；
宽度：40px；
边界半径：50%；
字体系列：“Comfortaa”，无衬线；
背景：浅蓝色；
边框：蓝紫色1px；
位置：绝对位置；
弯曲方向：行；
显示器：flex；
证明内容：中心；
对齐项目：居中；
跨度{
显示：内联块；
}
}
}

还有JavaScript

const log=console.log.bind（null）；
函数生成器（）{
此参数。数据=[
{
信：“a”，
回答：“abducir”，
状态：0，
问题：[（“地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球上的地球外的地球外的地球外的地球外的地球外的地球外的地球外的地球上的地球外的地球外的地球上的地球外的地球上的地球上的地球上的地球外的地球上的地球上的地球上的地球上的地球上的地球上的地球
},
{
信：“b”，
回答：“宾果”，
状态：0，
问题：[（“B.Juego que ha sacado de quicio a todos los'Skylabers'en las sesions de precurso”），（“B.Juego que ha sacado de quicio a todos los'Skylabers'en las sesions de precurso”），（“B.3 Juego que ha sacado de quicio a todos'Skylabers'en las sesions de precurso”）]
},
{
信：“c”，
回答：“churumbel”，
状态：0，
问题：[（“康拉尼诺，克里奥，贝贝”），（“康拉尼诺，克里奥，贝贝”），（“康拉尼诺，克里奥，贝贝”）]
},
{
信：“d”，
回答：“迪亚里亚”，
状态：0，
问题：[（“疏散和浓缩细菌消化功能”和（“疏散和浓缩细菌消化功能”）(“关于疏散和浓缩液体的细菌消化功能”
]
},
{
信：“e”，
答:"外浆体",，
状态：0，
问题：[（“医学和放射医学的胶状物和胶状物和放射医学的胶状物和放射医学的胶状物和放射医学的胶状物和放射医学的胶状物和放射医学的胶状物和放射医学的胶状物”），（”关于血浆膜的胶状物和浓缩物，参见《医学和放射医学杂志》）]
},
{
信：“f”，
回答：“面部”，
状态：0，
问题：[（“不需要大埃斯福尔佐，难治性卡帕迪亚德”），（“不需要大埃斯福尔佐，难治性卡帕迪亚德”），（“不需要大埃斯福尔佐，难治性卡帕迪亚德”）]
},
{
信：“g”，
答：“加拉夏”，
状态：0，
问题：[（“CON LA G.concento enrome de estrellas，polvo interestelar，gas y partículas”），（“CON LA G.concento enrome de estrellas，polvo interestelar，gas y partículas”），（“CON LA G.concento enrome de estrellas，polvo interestelar，gas y partículas”），（“CON LA G.concento enrome de estrellas，polvo
},
{
信：“h”，
回答：“哈拉基里”，
状态：0，
问题：[（“康拉·H·自杀仪式日前”和（“康拉·H·自杀仪式日前”）和（“康拉·H·自杀仪式日后”和“（“康拉·H·自杀仪式日后”）]
},
{
信：“我”，
回答：“伊格莱西亚”，
状态：0，
问题：[（“圣殿骑士团”），（“圣殿骑士团”），（“圣殿骑士团”），（“圣殿骑士团”）]
},
{
信：“j”，
回答：“贾巴利”，
状态：0，
问题：[（“在“El Rey León”película，de nombre Pumba”中的销售活动”（“在“El Rey León”película，de nombre Pumba”中的销售活动”），（“在“El Rey León”película，de nombre Pumba”中的销售活动”），（“在“El Rey León”pel Rey Pumba n”中的销售活动中的销售活动”）]
},
{
信：“k”，
回答：“神风”，
状态：0，
问题：[（“CON LA K.Persona que se juega