CSS用于在每行的每张小卡片下方显示全宽卡片

<div class="container">
  <div class="card">小卡片1</div>
  <div class="card">小卡片2</div>
  <div class="full-width-card">全宽卡片1</div>
  <div class="card">小卡片3</div>
  <div class="card">小卡片4</div>
  <div class="full-width-card">全宽卡片2</div>
  <!-- 更多卡片... -->
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 calc(50% - 10px); /* 假设每张小卡片占据一半宽度减去间距 */
  margin: 5px;
  box-sizing: border-box;
}

.full-width-card {
  flex: 1 1 100%; /* 全宽卡片占据整行 */
  margin: 5px 0; /* 上下间距 */
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充列，每列最小200px，最大1fr */
  grid-gap: 10px; /* 网格间距 */
}

.card {
  /* 小卡片样式 */
}

.full-width-card {
  grid-column: 1 / -1; /* 全宽卡片占据整行 */
}