CSS change padding of children element

Issue

here's the HTML

<div style="position: relative; height: 350px;">
    <div style="position: absolute; left: 0%; top: 0px;">
        <img width="450" height="450" src="image.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
    </div>
</div>
<div style="position: relative; height: 350px;">
    <div style="position: absolute; left: 0%; top: 0px;">
        <img width="450" height="450" src="image2.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
    </div>
</div>
<div style="position: relative; height: 350px;">
    <div style="position: absolute; left: 0%; top: 0px;">
        <img width="450" height="450" src="image3.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
    </div>
</div>
<div style="position: relative; height: 350px;">
    <div style="position: absolute; left: 0%; top: 0px;">
        <img width="450" height="450" src="image4.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
    </div>
</div>
<div style="position: relative; height: 350px;">
    <div style="position: absolute; left: 0%; top: 0px;">
        <img width="450" height="450" src="image5.jpg" class="archia-folio-thumbnail" loading="lazy"></a>
    </div>
</div>

I want to make all these images to be in multiple rows with 3 columns, so I was thinking I could add some css that automatically added a certain number of padding for each child, the problem is also that I don't know if it's possible to know when it's time to change row and add padding on top.

I know that with bootstrap and similar it would be a lot easier and efficient but unfortunately I can't use any external library, if someone knows how to do this just with css I would be very grateful.

Solution

I would first recommend adding a parent container. Align the children horizontally using display: flex; then allow them to stack when their combined width reaches 100% by using flex-wrap: wrap;

Then as mentioned in your question, when you need to add padding on to the top of the 'stacked' items, you can use CSS to select all items except the first 3, and give them a padding.

Here's an example of how it works.

.items{
  display: flex; 
  flex-wrap: wrap; 
}

.item{
  width: calc(100%/3); /* approx 33% */
  background: grey;
}
.item:not(:nth-of-type(-n+3)){ /* select every .item - but not the first 3 */
  padding-top: 10px;
}

.item > div{
  padding: 10px;
  background: pink;
}

<div class="items">
  <div class="item">
    <div>Image</div>
  </div>
  <div class="item">
    <div>Image</div>
  </div>
  <div class="item">
    <div>Image</div>
  </div>
  <div class="item">
    <div>Image</div>
  </div>
  <div class="item">
    <div>Image</div>
  </div>
</div>

Answered By - Kyle