卡片布局

基本结构如下：

<div class="cards">
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
</div>

基本样式如下：

html, body {
  height: 100%;
  margin: 0;
}

.cards {
  height: 100%;
}

.cards__item {
  background: pink;
  height: calc(33.33% - 16px);
  width: calc(33.33% - 16px);
  margin: 8px;
  border-radius: 0.25rem;
}

.cards__item:nth-child(odd)