How to change the height of an individual flex item?

Question

css

Hello! Can you please tell me how to change the height of individual flex items?
I'm trying to make a similar gallery using pseudo-elements, but they don't work, the elements take up all the free space. Can this behavior be changed somehow?

https://codepen.io/akabeerka/pen/jOVNQre

<div class="works">
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="1">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="2">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="3">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="4">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="5">
  </div>
  
  <div class="works__item">
    <img class="works__photo" src="img/1.jpg" alt="6">
  </div>
            
</div>

.works {
    display: flex;
    flex-wrap: wrap;
    height: 830px;
}

.works__item {
    width: 30%;
    position: relative;
    margin: 10px;

    border: 1px dashed #ebac0c;
}

.works__item:not-child(odd) {
    height: 300px;
}
.works__item:not-child(even) {
    height: 500px;
}

Answer 1

Taking your html as a basis, you can implement it this way - https://codepen.io/frontend_dev3/pen/wvovwVr
It will work if there are 2 blocks in the column. If you need a solution for a gallery with a large number of elements - let me know, I will offer a different solution!

Answer 2

Specifically, to the question of how to change:
.works-item:nth-cjild(1){
height: 400px;
}
or add your own class to the element.
According to the gallery, if you implement on flex what you have in the picture, then:

<div class="works">
  <div class="col-1">
      <div class="works__item">
        <img class="works__photo" src="img/1.jpg" alt="1">
      </div>
    <div class="works__item">
      <img class="works__photo" src="img/1.jpg" alt="4">
    </div>
  </div>
 </div>

.col-1, .col-2, .col-3 {
display: flex;
flex-direction: column;
}
split the flex container into three more containers, but only with flex-direction: column