CSS grid-template-areas div 中的图像重叠

Question

我有 6 张图像想要与网格模板区域对齐。问题是，当我将一个图像设置为覆盖更大的网格区域时，下一个图像不会移动到下一个网格区域，而是与更大的图像重叠。 css如下。

.image-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 40rem;
    grid-gap:1.5rem;
    grid-template-areas:
                'img-1 img-2 img-3'
                'img-4 img-5 img-3'
                'img-6 img-6 img-6'
           


 
              
               
}

.img-1{

    grid-area: img-1;
    background-image: url("./gallery/artefacts/nyungu.jpg");

}

.img-2{
    
    grid-area: img-2;
    background-image: url("./gallery/artefacts/itimu.jpeg");

}

.img-3{
    min-height: 71.5rem;
    grid-area: img-3;
    background-image: url("./gallery/artefacts/ndome2.jpeg");

}

.img-4{
  
    grid-area: img-4;
    background-image: url("./gallery/artefacts/kiondo.jpeg");
    
}
.img-5{
   
    grid-area: img-5;
    background-image: url("./gallery/artefacts/mwatu.jpeg");

}

.img-6{
   
    min-height: 40rem;
    grid-area: img-6;
    background-image: url("./gallery/artefacts/njora.jpeg");

}

现在一张img-6会转到我已经放置img-3的地方。下面是html。

       <div class="image-gallery">   


            <div  >
                <a href="./gallery/artefacts/nyungu.jpg" class="img-1">1
                    <i class="icon ion-md-expand">1</i> 
                    
                </a>

                <p class="caption">Lorem ipsum dolor sit amet.</p>
                
            </div>
            <div  >
                <a href="./gallery/artefacts/itimu.jpeg" class="img-2">2
                    <i class="icon ion-md-expand">2</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/ndome2.jpeg" class="img-3">3
                    <i class="icon ion-md-expand">3</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, 
                    iusto? Veritatis quibusdam, modi provident impedit laboriosam, suscipit voluptatibus, 
                   .</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/kiondo.jpeg" class="img-4">4
                    <i class="icon ion-md-expand">4</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/mwatu.jpeg" class="img-5">5
                    <i class="icon ion-md-expand">5</i> 
                </a>
                <p class="caption">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/njora.jpeg" class="img-6">6
                    <i class="icon ion-md-expand">6</i> 
                </a>
                <p class="caption">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti.</p>
            </div>      

        </div>

请帮我解决上述问题。注意 img-3 的高度比所有其他图像都高。

我尝试了网格高度的 minmax，看看它是否会调整，但结果现在所有 img-6 都被向下推，留下空空间

Answer 1

添加适合图像属性的对象。

 <div class="image-gallery">   


            <div  >
                <a href="./gallery/artefacts/nyungu.jpg" class="img-1">1
                    <i class="icon ion-md-expand">1</i> 
                    
                </a>

                <p class="caption">Lorem ipsum dolor sit amet.</p>
                
            </div>
            <div  >
                <a href="./gallery/artefacts/itimu.jpeg" class="img-2">2
                    <i class="icon ion-md-expand">2</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/ndome2.jpeg" class="img-3">3
                    <i class="icon ion-md-expand">3</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, 
                    iusto? Veritatis quibusdam, modi provident impedit laboriosam, suscipit voluptatibus, 
                   .</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/kiondo.jpeg" class="img-4">4
                    <i class="icon ion-md-expand">4</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/mwatu.jpeg" class="img-5">5
                    <i class="icon ion-md-expand">5</i> 
                </a>
                <p class="caption">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/njora.jpeg" class="img-6">6
                    <i class="icon ion-md-expand">6</i> 
                </a>
                <p class="caption">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti.</p>
            </div>      

        </div>


.image-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 40rem;
    grid-gap:1.5rem;
    grid-template-areas:
                'img-1 img-2 img-3'
                'img-4 img-5 img-3'
                'img-6 img-6 img-6'
           


 
              
               
}

.img-1{

    grid-area: img-1;
    background-image: url("./gallery/artefacts/nyungu.jpg");
   object-fit: cover;

}

.img-2{
    
    grid-area: img-2;
    background-image: url("./gallery/artefacts/itimu.jpeg");
   object-fit: cover;

}

.img-3{
    min-height: 71.5rem;
    grid-area: img-3;
    background-image: url("./gallery/artefacts/ndome2.jpeg");
   object-fit: cover;

}

.img-4{
  
    grid-area: img-4;
    background-image: url("./gallery/artefacts/kiondo.jpeg");
   object-fit: cover;
    
}
.img-5{
   
    grid-area: img-5;
    background-image: url("./gallery/artefacts/mwatu.jpeg");
   object-fit: cover;

}

.img-6{
   
    min-height: 40rem;
    grid-area: img-6;
    background-image: url("./gallery/artefacts/njora.jpeg");
   object-fit: cover;

}