Here's what needs to be done:
That is, the blocks can be different heights, but there should be no empty spaces
I tried it with both flexbox and grid, but nothing works. please help. i even asked gpt, but he didn't understand me. i really hope they can help me here.
my code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: min-content;
grid-auto-flow: dense;
gap: 16px;
padding: 16px;
}
.card {
background-color: #f1f1f1;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: left;
border-radius: 5px;
height: fit-content;
}
.card h3 {
margin-bottom: 10px;
}
</style>
<body>
<div class="cards-container">
{% for user in users %}
<div class="card">
<h3>{{ user.name }}</h3>
<p>Email: {{ user.email }}</p>
<p>Телефон: {{ user.phone }}</p>
<p>Опыт работы: {{ user.experience }}</p>
<p>Образование: {{ user.education }}</p>
<p>Навыки: {{ user.skills }}</p>
<p>Вакансия: {{ user.vacancy.name }}</p>
</div>
{% endfor %}
</div>
</body>
