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

要在每行中的每张小卡片下方显示全宽卡片，您可以使用CSS的Flexbox或Grid布局。以下是两种方法的示例：

方法1：使用Flexbox

HTML结构可能如下所示：

<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>

CSS样式可能如下所示：

.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;
}

方法2：使用Grid布局

HTML结构与Flexbox示例相同。

CSS样式可能如下所示：

.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; /* 全宽卡片占据整行 */
}

在这两种方法中，您需要根据实际情况调整卡片的宽度、间距和其他样式。这些示例假设每张小卡片占据一半的宽度，全宽卡片占据整行。您可以根据需要调整calc()函数中的值和grid-template-columns属性。