Javascript 单击时，栅格中的图元将移动

我有个问题。我确实使用了网格来布局页面上的按钮。但是，当我点击“添加新任务”、“修改任务”和“删除任务”等按钮时，按钮移到了一边。我不知道如何将它们保留在适当的位置。有人能给我解释一下吗？我确实在下面输入了代码来解释这个问题

var add=document.getElementById（“添加任务”）；
功能任务（）{
document.getElementById（“添加表单”）.style.display=“块”；
}
add.addEventListener（“单击”，任务）；
var modify_task=document.getElementById（“modify_task”）；
函数modify_form（）{
document.getElementById（“修改表单”）.style.display=“块”；
}
修改任务。添加EventListener（“单击”，修改表单）；
var delete_task=document.getElementById（“delete_task”）；
函数delete_form（）{
document.getElementById（“delete_form”）.style.display=“block”；
}
删除任务。添加事件列表（“单击”，删除表单）；

div#添加#任务#表单#添加#表单{
显示：无；
}
div#添加任务表格{
保证金：20px自动；
}
divාaddŠ任务\u form#addŠ表单标签{
显示：内联块；
宽度：100px；
文本对齐：右对齐；
字号：17px；
字体大小：粗体；
颜色：#5e001f；
}
div#添加任务#表单#添加表单输入[type=“text”]{
宽度：240px；
高度：20px；
边框：1px实心#5e001f；
}
div#添加任务#表格#添加表格div{
利润率：8px；
填充：8px；
}
div#添加#任务#表格#添加#表格#提交(添加)表格{
边框：1px实心#5e001f；
边界半径：7px；
宽度：120px；
高度：20px；
背景色：白色；
颜色：#5e001f；
字体大小：14px；
字体大小：粗体；
}
div#添加任务#表单#添加表单#提交(添加表单)：悬停{
背景色：#5e001f；
颜色：白色；
}
div#添加任务#表单#添加任务{
边框：1px实心#5e001f；
边界半径：7px；
宽度：120px；
高度：40px；
背景色：白色；
颜色：#5e001f；
字体大小：14px；
字体大小：粗体；
}
div#添加任务#表单#添加任务：悬停{
背景色：#5e001f；
颜色：白色；
}
/*
部门#添加任务#表格#添加表格#通知{
利润率：8px；
填充：8px；
字号：17px；
字体大小：粗体；
颜色：#5e001f；
}
*/
div#修改#任务#表格#修改#表格{
显示：无；
}
div#删除#任务#表格#删除#表格{
显示：无；
}
分区#集装箱#所有{
显示：网格；
网格模板：100px/重复（3，1fr）；
网格模板区域：
“添加修改删除”
}
div#容器#所有#添加#任务#表单{
网格区域：添加；
自我辩护：中心；
}
div#容器#所有#修改#任务#表单{
网格区域：修改；
自我辩护：中心；
}
div#容器#全部#删除#任务#表单{
网格区域：删除；
自我辩护：中心；
}
div#修改任务表格{
保证金：20px自动；
}
div#修改#任务#表单#修改#表单标签{
显示：内联块；
宽度：100px；
文本对齐：右对齐；
字号：17px；
字体大小：粗体；
颜色：#5e001f；
}
div#修改任务#表单#修改表单输入[type=“text”]{
宽度：240px；
高度：20px；
边框：1px实心#5e001f；
}
div#修改任务#表格#修改表格div{
利润率：8px；
填充：8px；
}
div#修改#任务#表格#修改#表格#提交#修改#表格{
边框：1px实心#5e001f；
边界半径：7px；
宽度：120px；
高度：20px；
背景色：白色；
颜色：#5e001f；
字体大小：14px；
字体大小：粗体；
}
div#修改#任务#表单#修改#表单#提交(修改)表单：悬停{
背景色：#5e001f；
颜色：白色；
}
div#修改任务#表单#修改任务{
边框：1px实心#5e001f；
边界半径：7px；
宽度：120px；
高度：40px；
背景色：白色；
颜色：#5e001f；
字体大小：14px；
字体大小：粗体；
}
div#修改任务#表单#修改任务：悬停{
背景色：#5e001f；
颜色：白色；
}
div#删除任务表格{
保证金：20px自动；
}
div#删除任务#表格#删除表格标签{
显示：内联块；
宽度：100px；
文本对齐：右对齐；
字号：17px；
字体大小：粗体；
颜色：#5e001f；
}
div#删除任务#表格#删除表格输入[type=“text”]{
宽度：240px；
高度：20px；
边框：1px实心#5e001f；
}
div#删除任务#表格#删除表格div{
利润率：8px；
填充：8px；
}
div#删除#任务#表格#删除#表格#提交#删除#表格{
边框：1px实心#5e001f；
边界半径：7px；
宽度：120px；
高度：20px；
背景色：白色；
颜色：#5e001f；
字体大小：14px；
字体大小：粗体；
}
div#删除#任务#表单#删除#表单#提交(删除)表单：悬停{
背景色：#5e001f；
颜色：白色；
}
div#删除任务#表格#删除任务{
边框：1px实心#5e001f；
边界半径：7px；
宽度：120px；
高度：40px；
背景色：白色；
颜色：#5e001f；
字体大小：14px；
字体大小：粗体；
}
div#删除任务#表单#删除任务：悬停{
背景色：#5e001f；
颜色：白色；
}

主列表

待办事项清单
添加新任务
标题


描述


到期日


时间




修改任务
什么部门？


什么身份证？


标题


描述


到期日


时间




删除任务