去除垂直、交错和重叠的卡片堆之间的水平空间答案

【问题标题】：Removing horizontal space between vertical, staggered and overlapping pile of cards去除垂直、交错和重叠的卡片堆之间的水平空间
【发布时间】：2019-09-23 11:57:21
【问题描述】：

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

我尝试添加以下额外的 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;}

请看https://jsfiddle.net/lenbo41/nvu5jyzt/4/

需要看3堆右边的4堆、4堆右边的5堆等，各堆之间不能有大的空隙。

#p1-grid {
  display: grid;
  grid-template-columns: [three] 100px [four] 100px [five] 100px [six] 100px [seven] 100px [eight] 100px [nine] 100px [ten] 100px [jack] 100px [queen] 100px [king] 100px [ace] 100px [ace-end];
  grid-template-rows: [card1] 150px [card2] 150px [card3] 150px [card4] 150px [card5] 150px [card6] 150px [card7] 150px [row-end];
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  background-color: beige;
  color: black;
  font-size: 20px;
  padding: 20px;
  max-height: 510px;
  max-width: 1920px;
}

div.card1 {
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 11;
  background-color: red;
  opacity: 0.80;
}

div.card2 {
  position: relative;
  top: 40px;
  left: -100px;
  z-index: 12;
  background-color: orange;
  opacity: 0.80;
}

div.card3 {
  position: relative;
  top: 80px;
  left: -200px;
  z-index: 13;
  background-color: yellow;
  opacity: 0.80;
}

div.card4 {
  position: relative;
  top: 120px;
  left: -300px;
  z-index: 14;
  background-color: green;
  opacity: 0.80;
}

div.card5 {
  position: relative;
  top: 160px;
  left: -400px;
  z-index: 15;
  background-color: blue;
  opacity: 0.80;
}

div.card6 {
  position: relative;
  top: 200px;
  left: -500px;
  z-index: 16;
  background-color: darkblue;
  opacity: 0.80;
}

div.card7 {
  position: relative;
  top: 220px;
  left: -600px;
  z-index: 17;
  background-color: purple;
  opacity: 0.80;
}

<div id="p1-grid">
  <div class="three card1">3H</div>
  <div class="three card2">3D</div>
  <div class="three card3">3C</div>
  <div class="three card4">3H</div>
  <div class="three card5">3D</div>
  <div class="three card6">3C</div>
  <div class="three card7">3C</div>

  <div class="four card1">4H</div>
  <div class="four card2">4S</div>
  <div class="four card3">4C</div>
  <div class="four card4">4D</div>
  <div class="four card5">4S</div>
  <div class="four card6">4C</div>
  <div class="four card7">4D</div>

  <div class="five card1">5H</div>
  <div class="five card2">5D</div>
  <div class="five card3">5C</div>
  <div class="five card4">5H</div>
  <div class="five card5">5D</div>
  <div class="five card6">5C</div>
  <div class="five card7">5C</div>

  <div class="six card1">6H</div>
  <div class="six card2">6S</div>
  <div class="six card3">6C</div>
  <div class="six card4">6D</div>
  <div class="six card5">6H</div>
  <div class="six card6">6S</div>
  <div class="six card7">6C</div>

  <div class="seven card1">7H</div>
  <div class="seven card2">7H</div>
  <div class="seven card3">7C</div>
  <div class="seven card4">7H</div>
  <div class="seven card5">7H</div>
  <div class="seven card6">7C</div>
  <div class="seven card7">7C</div>

  <div class="eight card1">8H</div>
  <div class="eight card2">8S</div>
  <div class="eight card3">8C</div>
  <div class="eight card4">8D</div>
  <div class="eight card5">8S</div>
  <div class="eight card6">8C</div>
  <div class="eight card7">8D</div>

  <div class="nine card1">9H</div>
  <div class="nine card2">9D</div>
  <div class="nine card3">9C</div>
  <div class="nine card4">9H</div>
  <div class="nine card5">9D</div>
  <div class="nine card6">9C</div>
  <div class="nine card7">9C</div>

  <div class="ten card1">10H</div>
  <div class="ten card2">10S</div>
  <div class="ten card3">10C</div>
  <div class="ten card4">10D</div>
  <div class="ten card5">10S</div>
  <div class="ten card6">10C</div>
  <div class="ten card7">10D</div>

  <div class="jack card1">JH</div>
  <div class="jack card2">JD</div>
  <div class="jack card3">JC</div>
  <div class="jack card4">JH</div>
  <div class="jack card5">JD</div>
  <div class="jack card6">JC</div>
  <div class="jack card7">JC</div>

  <div class="queen card1">QH</div>
  <div class="queen card2">QS</div>
  <div class="queen card3">QC</div>
  <div class="queen card4">QD</div>
  <div class="queen card5">QH</div>
  <div class="queen card6">QS</div>
  <div class="queen card7">QC</div>

  <div class="king card1">KH</div>
  <div class="king card2">KD</div>
  <div class="king card3">KC</div>
  <div class="king card4">KH</div>
  <div class="king card5">KD</div>
  <div class="king card6">KC</div>
  <div class="king card7">KC</div>

  <div class="ace card1">AH</div>
  <div class="ace card2">AS</div>
  <div class="ace card3">AC</div>
  <div class="ace card4">AD</div>
  <div class="ace card5">AH</div>
  <div class="ace card6">AS</div>
  <div class="ace card7">AC</div>
</div>

【问题讨论】：

这是必需的布局吗：jsfiddle.net/73t6nhcq?
完美的 kukkuz。你真棒。谢谢！

标签： html css alignment css-grid

【解决方案1】：

将 cmets 放入答案中 - 您正在使用 相对定位 将 网格单元 从它们的位置移动，从而堆叠卡片，这使得它棘手来预测最终布局。你可以试试这个：

使用div.three、div.four、...、div.ace、

列放置

将每个 div.card1、div.card2、...、div.card7 元素分别放入第 1、2、...、7 行，
使用grid-auto-rows: 40px代替grid-template-rows，并在#p1-grid > div上设置150px的卡片高度以获得所需的效果。

请看下面的演示：

#p1-grid {
  display: grid;
  grid-template-columns: [three] 100px [four] 100px [five] 100px [six] 100px [seven] 100px [eight] 100px [nine] 100px [ten] 100px [jack] 100px [queen] 100px [king] 100px [ace] 100px [ace-end];
  grid-auto-rows: 40px; /* default card row height */
  grid-column-gap: 10px; /* a column gap */
  background-color: beige;
  color: black;
  font-size: 20px;
  padding: 20px;
  max-height: 510px;
  max-width: 1920px;
}

#p1-grid > div {
  height: 150px; /* specify height of each card here */
}

/* row placement on each card */

div.card1 {
  position: relative;
  z-index: 11;
  background-color: red;
  opacity: 0.80;
  grid-row: 1; /* place in row 1 */
}

div.card2 {
  position: relative;
  z-index: 12;
  background-color: orange;
  opacity: 0.80;
  grid-row: 2;  /* place in row 2 */
}

div.card3 {
  position: relative;
  z-index: 13;
  background-color: yellow;
  opacity: 0.80;
  grid-row: 3; /* place in row 3 */
}

div.card4 {
  position: relative;
  z-index: 14;
  background-color: green;
  opacity: 0.80;
  grid-row: 4; /* place in row 4 */
}

div.card5 {
  position: relative;
  z-index: 15;
  background-color: blue;
  opacity: 0.80;
  grid-row: 5; /* place in row 5 */
}

div.card6 {
  position: relative;
  z-index: 16;
  background-color: darkblue;
  opacity: 0.80;
  grid-row: 6; /* place in row 6 */
}

div.card7 {
  position: relative;
  z-index: 17;
  background-color: purple;
  opacity: 0.80;
  grid-row: 7; /* place in row 7 */
}

/* column placement */

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

<div id="p1-grid">
  <div class="three card1">3H</div>
  <div class="three card2">3D</div>
  <div class="three card3">3C</div>
  <div class="three card4">3H</div>
  <div class="three card5">3D</div>
  <div class="three card6">3C</div>
  <div class="three card7">3C</div>

  <div class="four card1">4H</div>
  <div class="four card2">4S</div>
  <div class="four card3">4C</div>
  <div class="four card4">4D</div>
  <div class="four card5">4S</div>
  <div class="four card6">4C</div>
  <div class="four card7">4D</div>

  <div class="five card1">5H</div>
  <div class="five card2">5D</div>
  <div class="five card3">5C</div>
  <div class="five card4">5H</div>
  <div class="five card5">5D</div>
  <div class="five card6">5C</div>
  <div class="five card7">5C</div>

  <div class="six card1">6H</div>
  <div class="six card2">6S</div>
  <div class="six card3">6C</div>
  <div class="six card4">6D</div>
  <div class="six card5">6H</div>
  <div class="six card6">6S</div>
  <div class="six card7">6C</div>

  <div class="seven card1">7H</div>
  <div class="seven card2">7H</div>
  <div class="seven card3">7C</div>
  <div class="seven card4">7H</div>
  <div class="seven card5">7H</div>
  <div class="seven card6">7C</div>
  <div class="seven card7">7C</div>

  <div class="eight card1">8H</div>
  <div class="eight card2">8S</div>
  <div class="eight card3">8C</div>
  <div class="eight card4">8D</div>
  <div class="eight card5">8S</div>
  <div class="eight card6">8C</div>
  <div class="eight card7">8D</div>

  <div class="nine card1">9H</div>
  <div class="nine card2">9D</div>
  <div class="nine card3">9C</div>
  <div class="nine card4">9H</div>
  <div class="nine card5">9D</div>
  <div class="nine card6">9C</div>
  <div class="nine card7">9C</div>

  <div class="ten card1">10H</div>
  <div class="ten card2">10S</div>
  <div class="ten card3">10C</div>
  <div class="ten card4">10D</div>
  <div class="ten card5">10S</div>
  <div class="ten card6">10C</div>
  <div class="ten card7">10D</div>

  <div class="jack card1">JH</div>
  <div class="jack card2">JD</div>
  <div class="jack card3">JC</div>
  <div class="jack card4">JH</div>
  <div class="jack card5">JD</div>
  <div class="jack card6">JC</div>
  <div class="jack card7">JC</div>

  <div class="queen card1">QH</div>
  <div class="queen card2">QS</div>
  <div class="queen card3">QC</div>
  <div class="queen card4">QD</div>
  <div class="queen card5">QH</div>
  <div class="queen card6">QS</div>
  <div class="queen card7">QC</div>

  <div class="king card1">KH</div>
  <div class="king card2">KD</div>
  <div class="king card3">KC</div>
  <div class="king card4">KH</div>
  <div class="king card5">KD</div>
  <div class="king card6">KC</div>
  <div class="king card7">KC</div>

  <div class="ace card1">AH</div>
  <div class="ace card2">AS</div>
  <div class="ace card3">AC</div>
  <div class="ace card4">AD</div>
  <div class="ace card5">AH</div>
  <div class="ace card6">AS</div>
  <div class="ace card7">AC</div>
</div>

【讨论】：

@L.Palmeri 您能否接受/赞成回答并关闭问题？谢谢！