CSS divs stacking on top of eachother (for loop razor pages)

I know this question has been answered a million times but I can't manage to make my divs stack below eachother. I tried with all kinds of css, grid flex display etc. but the second and third div stack on top (or on the side) of the first row no matter what. Everywhere I read it gets suggested to put parent(first row) as absolute and children as relative but that doesn't seem to work.

@page
@model IBaiWebApp.Pages.IndexModel
@{DomainLayer.Classes.IBaiManager usr= new();
}

@{
    <div class="modularItemBox">
    @for (int i = 0; i < usr.ProductList.Count(); i++)
            {
            var x = usr.ProductList[i];
            if (i < 4)
            {<div class="firstItemRow">
                <div class="itemSquare">
                    <div class="namePricePicSection">
                        <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                        @x.Name<br>
                        @x.Price$
                    </div><br>
                    <div class="descriptionSection">@x.Description<br></div>
                </div>
            </div>
            }
            else if (i < 8)
            {
                <div class="secondItemRow">
                    <div class="itemSquare">
                        <div class="namePricePicSection">
                            <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                            @x.Name<br>
                            @x.Price$
                        </div><br>
                        <div class="descriptionSection">@x.Description<br></div>
                    </div>
                </div>
            }
            else
            {
                <div class="thirdItemRow">
                    <div class="itemSquare">
                        <div class="namePricePicSection">
                            <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                            @x.Name<br>
                            @x.Price$
                        </div><br>
                        <div class="descriptionSection">@x.Description<br></div>
                    </div>
                </div>
            }
        }
    </div>
}

CSS:
.modularItemBox {
    padding-top: 30px;
    padding-left: 450px;
    display: flex;
    justify-content: center;
    height:1000px;
}
.itemSquare {
    height: 200px;
    width: 200px;
    background-color: #fde55f;
    border-block: double black;
    border-left: double black;
    border-right: double black;
    display:inline-flex;
}
.itemPic {
    height: 90px;
    width: 90px;
}
.namePricePicSection{
    height:50%
}
.descriptionSection{
    height:50%;
    
}
.firstItemRow {
    position: relative;
    height: 200px;
    
}
.secondItemRow {
    position: absolute;
    height: 200px;
    padding-bottom: 200px;

}
.thirdItemRow {
    position: absolute;
    height: 200px;
}

Currently firstItemRow is in the correct position, while secondItemRow and thirdItem row are supposed to be below it but are not. Sorry for the silly question

edit:https://jsfiddle.net/fw29jn4k/, unfortunately I couldn't find a razor pages jsfiddle equivalent :(

Kind regards

Solution

You can try to add a div outside each row:

<div class="modularItemBox">
    <div class="test">
        @for (int i = 0; i < count1; i++)
        {
            var x = usr.ProductList[i];
            <div class="firstItemRow">
                <div class="itemSquare">
                    <div class="namePricePicSection">
                        <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                        @x.Name<br>
                        @x.Price$
                    </div><br>
                    <div class="descriptionSection">@x.Description<br></div>
                </div>
            </div>
        }

    </div>
    <div class="test">
        @for (int i = 4; i < count2; i++)
        {
            var x = usr.ProductList[i];
            <div class="secondItemRow">
                <div class="itemSquare">
                    <div class="namePricePicSection">
                        <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                        @x.Name<br>
                        @x.Price$
                    </div><br>
                    <div class="descriptionSection">@x.Description<br></div>
                </div>
            </div>
        }
    </div>
    <div class="test">
        @for (int i = 8; i < count3; i++)
        {
            var x = usr.ProductList[i];
            <div class="thirdItemRow">
                <div class="itemSquare">
                    <div class="namePricePicSection">
                        <div class="picSquare"><img class="itemPic" src="@x.PictureUrl" /></div>
                        @x.Name<br>
                        @x.Price$
                    </div><br>
                    <div class="descriptionSection">@x.Description<br></div>
                </div>
            </div>
        }
    </div>
</div>

css:

<style>
.modularItemBox {
    padding-top: 30px;
    padding-left: 450px;
    
    justify-content: center;
    height:1000px;

}
.itemSquare {
    height: 200px;
    width: 200px;
    background-color: #fde55f;
    border-block: double black;
    border-left: double black;
    border-right: double black;
    display:inline-flex;
}
.itemPic {
    height: 90px;
    width: 90px;
}
.namePricePicSection{
    height:50%
}
.descriptionSection{
    height:50%;
    
}
.test{
    display: flex;
}
.firstItemRow {
    position: relative;
    height: 200px;
    display:inline-block;
    
}
.secondItemRow {
    position: relative;
    height: 200px;
    padding-bottom: 200px;
    display:inline-block;

}
.thirdItemRow {
    position: relative;
    height: 200px;
    display:inline-block;

}

</style>

result: