https://i.stack.imgur.com/VderY.jpg
Looking at the image, there are 3 posts lined up in a row. I'm trying to adjust the spacing between each item to be about 20%. Specifically, I want the distance highlighted by the red dashes, instead of the current distance marked by the blue arrows.
I've been exploring within the .container and .post classes but haven't quite nailed it down yet.
This is the code snippet:
.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;
}
<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>