Html 消除垂直、交错和重叠卡片堆之间的水平空间

我正在尝试移除12个垂直卡片堆之间的空白水平空间。我已经将卡片按等级进行了堆叠（即，所有3个卡片都整齐地堆叠在一起，所有4个卡片都堆叠在一起，等等）。现在我只需要减少每个桩之间的水平空间。不知道为什么CSS网格会添加所有不需要的空间

我尝试添加以下额外CSS以进一步控制堆布局，但这只会让事情变得更糟：

div.three { grid-column-start: three;  grid-column-end: four;}
div.four { grid-column-start: four;  grid-column-end: five;}
div.five { grid-column-start: five;  grid-column-end: six;}
div.six { grid-column-start: six;  grid-column-end: seven;}
div.seven { grid-column-start: seven;  grid-column-end: eight;}
div.eight { grid-column-start: eight;  grid-column-end: nine;}
div.nine { grid-column-start: nine;  grid-column-end: ten;}
div.ten { grid-column-start: ten;  grid-column-end: jack;}
div.jack { grid-column-start: jack;  grid-column-end: queen;}
div.queen { grid-column-start: queen;  grid-column-end: king;}
div.king { grid-column-start: king;  grid-column-end: ace;}
div.ace { grid-column-start: ace;  grid-column-end: ace-end;}

请看

需要看到3号桩右侧的4号桩、4号桩右侧的5号桩等，桩之间没有大的空隙

#p1网格{
显示：网格；
网格模板列：[三]100px[四]100px[五]100px[六]100px[七]100px[八]100px[九]100px[十]100px[jack]100px[queen]100px[king]100px[ace]100px[ace end]；
网格模板行：[card1]150px[card2]150px[card3]150px[card4]150px[card5]150px[card6]150px[card7]150px[row end]；
网格行间距：0px；
栅柱间隙：0px；
背景颜色：米色；
颜色：黑色；
字体大小：20px；
填充：20px；
最大高度：510px；
最大宽度：1920像素；
}
分区卡1{
位置：相对位置；
顶部：0px；
左：0px；
z指数：11；
背景色：红色；
不透明度：0.80；
}
第2分部{
位置：相对位置；
顶部：40px；
左：-100px；
z指数：12；
背景颜色：橙色；
不透明度：0.80；
}
第3分部{
位置：相对位置；
顶部：80px；
左：-200px；
z指数：13；
背景颜色：黄色；
不透明度：0.80；
}
第4分部{
位置：相对位置；
顶部：120px；
左：-300px；
z指数：14；
背景颜色：绿色；
不透明度：0.80；
}
第5分部{
位置：相对位置；
顶部：160px；
左：-400px；
z指数：15；
背景颜色：蓝色；
不透明度：0.80；
}
第6分部{
位置：相对位置；
顶部：200px；
左：-500px；
z指数：16；
背景色：深蓝色；
不透明度：0.80；
}
第7分部{
位置：相对位置；
顶部：220px；
左：-600px；
z指数：17；
背景颜色：紫色；
不透明度：0.80；
}

3H
三维
3C
3H
三维
3C
3C
4H
4S
4C
4D
4S
4C
4D
5H
5D
5C
5H
5D
5C
5C
6H
6S
6C
6D
6H
6S
6C
7小时
7小时
7C
7小时
7小时
7C
7C
8H
8S
8C
8D
8S
8C
8D
9H
9D
9C
9H
9D
9C
9C
10小时
10秒
10C
10天
10秒
10C
10天
JH
法学博士
JC
JH
法学博士
JC
JC
QH
QS
质量控制
量子点
QH
QS
质量控制
KH
杜兰特
KC
KH
杜兰特
KC
KC
啊
作为
自动控制
公元
啊
作为
自动控制

将注释放入答案-您正在使用相对定位将网格单元从其位置移动，从而堆叠卡片，这使得预测最终布局变得很困难。您可以尝试以下方法：

• 使用已有的

  div.three

  ，

  div.three

  ，…，

  div.ace

  ，列放置规则

• 将每个

  div.card1

  、

  div.card2

  、…、

  div.card7

  元素分别放入第1、2、…、7行

• 使用

  grid auto rows:40px

  而不是

  grid template rows

  ，并在

  #p1 grid>div

  上设置150px卡高度以获得所需效果

请参见下面的演示：

#p1网格{
显示：网格；
网格模板列：[三]100px[四]100px[五]100px[六]100px[七]100px[八]100px[九]100px[十]100px[jack]100px[queen]100px[king]100px[ace]100px[ace end]；
网格自动行：40px；/*默认卡行高度*/
网格柱间隙：10px；/*a柱间隙*/
背景颜色：米色；
颜色：黑色；
字体大小：20px；
填充：20px；
最大高度：510px；
最大宽度：1920像素；
}
#p1网格>分区{
高度：150px；/*在此处指定每张卡的高度*/
}
/*每张卡片上的行位置*/
分区卡1{
位置：相对位置；
z指数：11；
背景色：红色；
不透明度：0.80；
网格行：1；/*放置在第1行*/
}
第2分部{
位置：相对位置；
z指数：12；
背景颜色：橙色；
不透明度：0.80；
网格行：2；/*放置在第2行*/
}
第3分部{
位置：相对位置；
z指数：13；
背景颜色：黄色；
不透明度：0.80；
网格行：3；/*放置在第3行*/
}
第4分部{
位置：相对位置；
z指数：14；
背景颜色：绿色；
不透明度：0.80；
网格行：4；/*放置在第4行*/
}
第5分部{
位置：相对位置；
z指数：15；
背景颜色：蓝色；
不透明度：0.80；
网格行：5；/*放置在第5行*/
}
第6分部{
位置：相对位置；
z指数：16；
背景色：深蓝色；
不透明度：0.80；
网格行：6；/*放置在第6行*/
}
第7分部{
位置：相对位置；
z指数：17；
背景颜色：紫色；
不透明度：0.80；
网格行：7；/*放置在第7行*/
}
/*列放置*/
div.three{网格列开始：三；}
div.four{网格列开始：四；}
div.five{网格列开始：五；}
div.six{网格列开始：six；}
div.seven{网格列开始：seven；}
div.eight{网格列开始：eight；}
div.nine{网格列开始：nine；}
div.ten{网格列开始：ten；}
div.jack{网格列开始：jack；}
div.queen{网格列开始：queen；}
div.king{网格列开始：king；}
div.ace{网格列开始：ace；}

3H
三维
3C
3H
三维
3C
3C
4H
4S
4C
4D
4S
4C
4D
5H
5D
5C
5H
5D
5C
5C
6H
6S
6C
6D
6H
6S
6C
7小时
7小时
7C
7小时
7小时
7C
7C
8H
8S
8C
8D
8S
8C
8D
9H
9D
9C
9H
9D
9C
9C
10小时
10秒
10C
10天
10秒
10C
10天
JH
法学博士
JC
JH
法学博士
JC
JC
QH
QS
质量控制
量子点
QH
QS
质量控制
KH
杜兰特
KC
KH
杜兰特
KC
KC
啊
作为
自动控制
公元
啊
作为
自动控制

这是所需的布局吗：？完美的kukkuz。你太棒了。谢谢大家!@L.Palmeri你能接受/投票回答并结束问题吗？非常感谢。