イメージを重ねると、CSSグリッドが次の行に適切に折り返されない

Question

イメージをレイヤー化するために使用しようとしているクラスが何らかの理由でCSSグリッドクラスsvgGridを誤動作させ、次の行に変更することなくlayer0と​​クラスを削除

.svgGrid { 
 
    display: grid; 
 
    grid-template-columns: repeat(5, 1fr); 
 
    min-width: 0px; 
 
    min-height: 0px; 
 
    grid-gap: 0px; 
 
    font-size: 0px; 
 
    background-color: #534e5b; 
 
} 
 

 
.imgContainer { 
 
    position: relative; 
 
} 
 

 
.imgContainer .layer0 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 0; 
 
} 
 

 
.imgContainer .layer1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 

 
img { 
 
    height: auto; 
 
    width: auto; 
 
    max-width: 100%; 
 
}

<div class="svgGrid"> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     </div>

は、問題を修正したが、明白な理由のために望ましくありません。

効果を実証JSFiddle：https://jsfiddle.net/kv00txzk/4/

正しく画面の5画分として定義される最初の行を横切って画像タイルを示します。次に、2行目に折り返して最後の4行目まで続けるのではなく、最初の列に折り返して、以前と同じ場所にイメージを再度描画します。

イメージコンテナは、各列の後の次の行にラップするだけでなく、階層化されたイメージを含めることが目的です。

Answer 1

絶対配置では、規則的なフローから要素を取り出します。インフローの最初のレイヤーはposition: relative;のままにしておき、次のレイヤーにのみposition: absolute;を使用します。

これはあなたが探しているものですか？

.svgGrid { 
 
    display: grid; 
 
    grid-template-columns: repeat(5, 1fr); 
 
    min-width: 0px; 
 
    min-height: 0px; 
 
    grid-gap: 0px; 
 
    font-size: 0px; 
 
    background-color: #534e5b; 
 
} 
 

 
.imgContainer { 
 
    position: relative; 
 
} 
 

 
.imgContainer .layer0 { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 0; 
 
} 
 

 
.imgContainer .layer1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 

 
img { 
 
    height: auto; 
 
    width: auto; 
 
    max-width: 100%; 
 
}

<div class="svgGrid"> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="https://image.flaticon.com/icons/svg/58/58904.svg" class="layer0" /> 
 
      <img src="https://s.cdpn.io/3/kiwi.svg" class="layer1"> 
 
     </div> 
 
     </div>