Question: I am trying to position images relatively to the main image - the rest of the images should be positioned on the left, right and top of the main image. 

```
   <div class="top">
            <img class="top__position" src="https://place-hold.it/300x150" alt="">
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
            <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>  
   </div>

```

I struggle with the execution of this task - I put the position relative on the top\_\_position class and position absolute on the top\_\_winner and top: 

```
.top__winner:nth-of-type(1) {
    position: absolute;
    top: 10px;
    left: 20px;

}

```

Answer: 
Something like this I presume

[Click here for Javascript Fiddle](https://jsfiddle.net/a51bhLd6/1/)

```
.top {
position: relative;
padding: 0 0; // Your image is 80px high so this will give 20px under
height: 100%;
min-height: 350px;
}

.top .top__position {
max-width: calc(100% - 200px);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.top div.top__winner {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.top div.top__winner:nth-child(2) {
  right: 0;
  left: unset;
  top: 50%;
  transform: translate(0, -50%);
}

.top div.top__winner:nth-child(3) {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

```
looks like a typical grid layout.

If i understood the position :
one small image on top of the big, then the 2 others on both sides.

it requires a 3 col grid to start from , *i used margin for alignment, you can reset them or use dedicated rules you will find reading a tutorial* , possible example below:

```css
.top {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: max-content;/* shrinks it to the width used by the content */
  margin: auto;/* if you want it at center */
  background:tomato; /* demo, to see where it stands */
}

.top>img {/* Note :this one is nth-child(1) , first child of .top*/
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.top__winner:nth-child(2) {
  grid-column: 2;
  margin: auto;
}

.top__winner:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  margin: auto 2px;
}

.top__winner:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
  margin: auto 2px;
}
```

```html
<div class="top">
  <img class="top__position" src="https://place-hold.it/300x150" alt="">
  <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>
  <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>
  <div class="top__winner"><img src="https://place-hold.it/80x80" alt=""></div>
</div>
```

Some usefull ressources :

<https://gridbyexample.com/> &

<https://css-tricks.com/snippets/css/complete-guide-grid/>

> 
> **`grid-template-columns`** , **`grid-template-rows`**
> 
> 
> Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.
> 
> 
> 

---

> 
> **`grid-column`**, **`grid-row`**
> 
> 
> Shorthand for `grid-column-start` + `grid-column-end`, and `grid-row-start` + `grid-row-end`, respectively.
> 
> 
>