具有重叠行的网格？

Question

我正在创建纸牌游戏，我想使用网格来放置纸牌（div）。如何创建行重叠的网格，如this image？

Answer 1

我用花车做的。至少在所有浏览器中都可以使用。

HTML：

<div class="card-set">
  <div class="row row-1">
    <!-- 1st row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
  <div class="row row-2">
    <!-- 2nd row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
  <div class="row row-3">
    <!-- 3rd row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
  <div class="row row-4">
    <!-- 4rd row -->
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
    <div class="col-1-of-10">
      <div class="card"></div>
    </div>
  </div>
</div>

SCSS

$grid-width: 1000px;
$gutter-horizontal: 15px;
$next-row-margin: 15px;
$card-height: 80px;
$card-gutter: 11px;
$row-number: row !default;

.row {
  max-width: $grid-width;
  margin: 0 auto;
  z-index: 0;
  position: absolute;

  // Clearfix
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  [class^="col-"] {
    float: left;

    &:not(:last-child) {
      margin-right: $gutter-horizontal;
    }
  }
}

@for $i from 2 to 10 {
  .#{$row-number}-#{$i} {
    top: #{$card-gutter * $i};
    z-index: $i - 1;
  }
}

.col-1-of-10 {
  width: calc((100% - 9 * #{$gutter-horizontal})/10);
}

.card {
  position: relative;
  width: 80px;
  background-color: white;
  height: $card-height;
  border: 3px solid black;
  border-radius: 10px;
}

这里是一个Codepen：https://codepen.io/alac1984/pen/YzzmRJK?editors=1100