CSS で動的な画像の 9 グリッド レイアウトを実装するためのサンプル コード

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">

<div class="grid-img-box">
    <van-image class='grid-img' v-for="data.photo の値" :key="値" fit="カバー" :src="値" />
</div>

.grid-img{

  /**
  幅と高さ 1. 3n+1 で、最後から 2 番目の画像です。 2. 3n+1 で、最後の画像です。 どちらの場合も、画像の幅と高さは 320 である必要があります。
      残りの2つのケースは次のとおりです。
    3. 画像が 1 枚しかない場合は、幅と高さは 320 です。
    4. その他のケースとインデックスでは、幅と高さは両方とも 220 です。
  */
  表示: インラインブロック;
  幅: 220ピクセル;
  高さ: 220px;
  &:一人っ子{
    幅: 320ピクセル;
    高さ: 320px;
  }

  &:n番目の子(3n+1):最後のn番目の子(2),
  &:n番目の子(3n+2):最後の子{
    幅: 332ピクセル;
    高さ: 332px;
  }

  /**
  間隔/レイアウト*/

  &:n番目の子(3n+2){
    マージン: 0 6px;
  }
  &:n番目の子(n+4){
    上マージン: 6px;
  }

  &:最初の子{
    左上の境界線の半径: 10px;
  }

  &:最後の子{
    右マージン: 0;
    右下の境界線の半径: 10px;
  }

  /**
  角丸*/

  //左下の丸い角: 最後の行の最初の &:nth-child(3n+1) {
    &:最後の子,
    &:n番目最後の子(2),
    &:n番目最後の子(3){
      左下の境界線の半径: 10px;
    }
  }

  // 4 つのレイアウトを処理する // 2 番目の余白を増やして 3 番目のレイアウトを次の行に押し出す &:nth-child(2):nth-last-child(3){
    右マージン: 220px;
  }
  //2番目の丸い角をリセットします &:nth-child(2):nth-last-child(3){
    右上の境界線の半径: 10px;
  }

  //3番目の余白と半径をリセットします
  &:n番目の子(3):最後のn番目の子(2){
    上マージン: 6px;
    右マージン: 6px;
    境界線の半径: 0 0 0 10px;
  }
  //4番目の丸い角をリセットします &:nth-child(4):last-child{
     境界線の半径: 0 0 10px 0;
  }
}