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

以下是在 `view` 标签中使用 `v-for` 循环，并使用 `display: grid` 网格布局实现每行显示三张图片，每 3 行添加广告位的代码示例：

<view class="grid-container">
  <view class="grid-item ad">广告位</view>
  <view v-for="(item, index) in list" :key="index" class="grid-item">{{ item.name }}</view>
</view>

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 行中添加一个广告位。在 `v-for` 循环中，使用 `item` 和 `index` 变量循环遍历 `list` 数组，并在每个元素上添加类名为 `grid-item`。