I did it with floats. At least it works in all browsers.
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;
}
Here's a Codepen: https://codepen.io/alac1984/pen/YzzmRJK?editors=1100
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…