При итерации массива базы данных, создание div с разными классами
Делаю страницу анонс новостей. Нужно что бы записи из БД выводились в разные div блоки с разными классами. В итоге что бы получилось как на фото. Статически мне удалось сделать страницу ( разметка и css готовы). Но как сделать что бы это работало динамически? Помогите пожалуйста, уже неделю мучаюсь.
a {
text-decoration: none;
}
.padding {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
}
.main {
margin: 0 auto;
max-width: 1040px;
padding: 20px;
}
.columns {
display: flex;
}
.column {
display: flex;
flex: 1;
flex-direction: column;
transform: translateY(-150%);
animation: ani 1s forwards;
}
@keyframes ani {
0% {transform: translateY(-150%);}
100% {transform: translateY(0);}
}
.main-column {
flex: 3;
}
.nested-column {
flex: 2;
}
.article {
background: white;
color: #666;
display: flex;
flex: 1;
flex-direction: column;
flex-basis: auto;
margin: 10px;
}
.article-image {
background: #eee;
display: block;
padding-top: 75%;
position: relative;
width: 100%;
}
.article-image img {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.article-image.is-3by2 {
padding-top: 66.6666%;
}
.article-image.is-16by9 {
padding-top: 56.25%;
}
.article-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}
.article-title {
color: #426087;
flex-shrink: 0;
font-size: 1.4em;
font-weight: bold;
font-weight: 700;
line-height: 1.2;
}
.article-content {
flex: 1;
margin-top: 5px;
}
.article-info {
display: flex;
font-size: 0.85em;
justify-content: space-between;
margin-top: 10px;
}
.first-article {
flex-direction: row;
}
.first-article .article-body {
flex: 1;
}
.first-article .article-image {
height: 300px;
order: 2;
padding-top: 0;
width: 400px;
}
.form {
height: max-content;
background-color: whitesmoke;
padding-left: 22px;
}
.form1 {
height: 31em;
}
.active {
transform: translateY(-150%);
animation: ani 3s forwards;
}
@keyframes ani {
0% {transform: translateY(-150%);}
100% {transform: translateY(0);}
}<div class="form">
<div class="main columns padding">
<section class="column main-column">
{% for post in posts %}
<a class="article first-article active" href="{% url 'content:news_post' %}">
<figure class="article-image is-4by3 padding">
{% thumbnail post.image "400x300" crop="left" as im %}
<img src="{{ im.url }}">
{% endthumbnail %}
</figure>
<div class="article-body padding active">
<h2 class="article-title padding">
{{post.title}}
</h2>
<!--p class="article-content padding"-->
{% autoescape on %}
{{ post.text|linebreaks|truncatewords:50}}
{% endautoescape %}
<!--/p-->
<footer class="article-info">
<span>{{ post.author }}</span>
{% endfor %}
<span>142 comments</span>
</footer>
</div>
</a>
<div class="columns padding">
<div class="column nested-column padding active">
<a class="article" href="#">
<figure class="article-image is-16by9 padding">
<img src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/1366/posts/26611/attachment/image-02.png" alt="">
</figure>
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
</div>
<div class="column padding">
<a class="article" href="#">
<figure class="article-image is-16by9 padding">
<img src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/1366/posts/26611/attachment/image-03.png" alt="">
</figure>
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
<a class="article" href="#">
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
<a class="article active" href="#">
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet feugiat facilisis.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
</div>
</div>
</section>
<section class="column">
<a class="article active" href="#">
<figure class="article-image is-3by2 padding">
<img src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/1366/posts/26611/attachment/image-04.png" alt="">
</figure>
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
<a class="article active" href="#">
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
<a class="article active" href="#">
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
<a class="article active" href="#">
<div class="article-body padding">
<h2 class="article-title padding">
Hello World
</h2>
<p class="article-content padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
</section>
</div>
</div>