uniapp中有一个for循环，我要使用display:grid网格布局每行显示三张图片，并且每3行加一个广告位，注意，广告位宽度100%，其他元素每行三个，请给我代码

以下是使用 `display: grid` 网格布局实现的每行显示三张图片，每 3 行添加广告位的代码：

<div class="grid-container">
  <div class="grid-item ad">广告位</div>
  <div class="grid-item">图片 1</div>
  <div class="grid-item">图片 2</div>
  <div class="grid-item">图片 3</div>
  <div class="grid-item">图片 4</div>
  <div class="grid-item">图片 5</div>
  <div class="grid-item">图片 6</div>
  <div class="grid-item ad">广告位</div>
  <div class="grid-item">图片 7</div>
  <div class="grid-item">图片 8</div>
  <div class="grid-item">图片 9</div>
  <div class="grid-item">图片 10</div>
  <div class="grid-item">图片 11</div>
  <div class="grid-item">图片 12</div>
  <div class="grid-item ad">广告位</div>
  <!-- 可以继续添加图片和广告位 -->
</div>

CSS 样式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行显示 3 列 */
  grid-gap: 10px; /* 列之间的间隔 */
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
  height: 200px;
  font-size: 30px;
}

.ad {
  grid-column: 1 / -1; /* 广告位占据所有列 */
  background-color: #ff0;
  height: 100px;
}

在 `grid-container` 容器中，使用 `grid-template-columns` 属性设置每行显示 3 列。在每行的第一个元素和第四个元素后面添加一个类名为 `ad` 的广告位，并且使用 `grid-column` 属性设置广告位跨越所有列。通过这种方式，在每 3 行中添加一个广告位。