[Solved] image gallery display with a main image and smaller images

by 


.gallery {width: 100%;}
.gallery a {
display: flex;
}
.gallery img{width: 80%; height: auto;}
.image-container {
display: flex;
flex-direction: column;
margin-left: 11px;
width: 20%;
height: 300px;
overflow: scroll;
}

.image-container img {
margin: 11px 0 0;}
.image-container img:first-child {
margin: 0 0 0;}
<div class="gallery">
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg">
<img class="card-img-top" src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Fő kép">

<div class="image-container">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
<img src="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg" alt="Egy kép a hirdetésről">
</div>
</a>

<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
<a href="https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg"></a>
</div>

I have used flex css to implement your design.

1

solved image gallery display with a main image and smaller images