how to fix indents between posts Options Rating

[Mim]

Example in the photo
There are 3 posts in a row, I don't know how to make the indent be, for example, 20% for everyone, but from the end of the height of the top (like if you look at the photo, then it's not that blue, but that the distance is that red)
(it's either in .container or .post, I couldn't figure it out)
P.S - if you do heigth: auto in .post, we will get (example in photo 2, but we need the objects to rise according to the scheme from photo 1)



*I want to remove the extra distance between posts

[css]
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.post {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
margin-bottom: 40px;
width: calc(33.33% - 20px); /* 3 posts per row */
background-color: #fff;
transition: background-color 0.3s, transform 0.3s ease;
display: flex;
flex-direction: column;
height: auto;
}

.post:hover {
transform: translateY(-5px);
background-color: #f8f8f8;
}

.post:active {
transform: translateY(0);
background-color: #fff;
}

.anime-image {
width: 100%;
height: auto;
flex-shrink: 0; /* Prevent image from shrinking */
}

.anime-details {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.title {
font-weight: bold;
font-size: 18px;
margin-bottom: 10px;
}

.rating {
font-weight: bold;
font-size: 14px;
}
[/css]

how i use
<div class="container">
@foreach (var anime in Model.Animes)
{
<div class="post">
<a href="url">
<div class="anime-image-container">
<img class="anime-image" src="@anime.Image">
</div>
</a>
<div class="anime-details">
<p class="title">@anime.Title</p>
<p class="rating">Рейтинг</p>
</div>
</div>
}
</div>

This post has been edited by Mim: Jul 12 2023, 12:02 PM

[Christian J]

I'm not so familiar with Flex layouts, but it sounds like you want three columns (instead of the current rows with three images per row)?

BTW the code below is not valid HTML, is it some kind of server-side script?

CODE

<div class="container">
@foreach (var anime in Model.Animes)
{
<div class="post">
<a href="url">
<div class="anime-image-container">
<img class="anime-image" src="@anime.Image">
</div>
</a>
<div class="anime-details">
<p class="title">@anime.Title</p>
<p class="rating">Рейтинг</p>
</div>
</div>
}
</div>

[Mim]

I'm not so familiar with Flex layouts, but it sounds like you want three columns (instead of the current rows with three images per row)?

BTW the code below is not valid HTML, is it some kind of server-side script?

CODE

<div class="container">
@foreach (var anime in Model.Animes)
{
<div class="post">
<a href="url">
<div class="anime-image-container">
<img class="anime-image" src="@anime.Image">
</div>
</a>
<div class="anime-details">
<p class="title">@anime.Title</p>
<p class="rating">Рейтинг</p>
</div>
</div>
}
</div>

asp.net