with javascript i'm fetching last forums posts, then with .map i've generated a template that return a list of posts.
the question is, how can i make the height of each post based on the content? because now the first post looks like this (see example)
https://jsfiddle.net/edk5frLg/
.gridWrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2em;
grid-auto-rows: minmax(150px, auto);
}
h1.postitle{
text-transform: capitalize;
}
h3.postitle {
display: inline-flex;
text-transform: capitalize;
}
span.TagsLabel.blogTagsLabel {
font-size: 1rem;
}
.blogTagsLabel {
margin-bottom: 8px;
vertical-align: top;
}
span.Avatar.blogAvatar {
margin-right: 8px;
vertical-align: middle;
width: 30px;
font-size: 14px;
height: 30px;
}
img.Avatar.blogAvatar {
margin-right: 8px;
vertical-align: middle;
width: 30px;
font-size: 14px;
height: 30px;
}
i.far.fa-clock.blogpostdate {
color: #4267a6;
}
h1.sectionTitle {
padding-left: 15px;
background: #e8ecf3;
border-radius: 8px;
color: @primary-color;
}
.allTags {
margin-top: 10px;
text-align: center;
}
p.postPreview{
color: @primary-color;
}
.postCreated{
color: @primary-color;
}
.coutPostBlog {
display: inline-flex;
margin-left: 8px;
background: #4267a6;
padding: 4px 6px 4px 6px;
font-size: 10px;
border-radius: 4px;
color: #fff;
}<div class="gridWrapper"><div class="article"><h3 class="postitle"><div class="avatarBlog"><span title="staff" class="Avatar blogAvatar" style="--avatar-bg:#a0e5dc;">S</span></div><a class="blogPost" href="/flarum/flarum/public/d/97-sdfsdfsdf">sdfsdfsdf</a></h3><div class="blogTagsLabel"><span class="TagsLabel blogTagsLabel"><a class="TagLabel " title="" href="/flarum/flarum/public/t/hfdhdfh" style=""><span class="TagLabel-text"> hfdhdfh</span></a></span><div class="coutPostBlog">1 POST</div></div><p class="postPreview">sfdsdf sfdsdfsfdsdf sfdsdfsfdsdf sfdsdfsfdsdf sfdsdfsfdsdf sfd
...</p><div class="postCreated"><i class="far fa-clock blogpostdate"></i> 2022-01-04</div></div><div class="article"><h3 class="postitle"><div class="avatarBlog"><img title="celestine69" class="Avatar blogAvatar" src="http://localhost/flarum/flarum/public/assets/avatars/QBCqu2tqn7eAbSnb.png" alt=""></div><a class="blogPost" href="/flarum/flarum/public/d/96-et-nisi">Et nisi.</a></h3><div class="blogTagsLabel"><span class="TagsLabel blogTagsLabel"><a class="TagLabel colored" title="adfsdfsfsdfsdf" href="/flarum/flarum/public/t/tag2" style="--tag-bg:#ff00cc;"><span class="TagLabel-text"><i class="icon fas fa-bolt"></i> tag2</span></a></span><div class="coutPostBlog">5 POSTS</div></div><p class="postPreview">Quis id in ipsum eveniet. Ut fugiat tenetur labore ratione consequatur et repellendus. Aut id fugit velit quos consequatur repellat laborum optio.
Et eum ea dolorem qui minima dolores aut. Sed blanditiis occaecati id molestiae eos qui. Eius magni illum id quia. Odio placeat repudiandae nostrum aut id architecto quae.
Veritatis placeat maiores veniam quia ea. Soluta nobis vel omnis quia. Impedit dolore illo dolores sed necessitatibus libero rerum. Est reprehenderit deleniti delectus quia dicta aliquam.
Voluptatem saepe aliquam sint. Quos nobis voluptatibus quasi eum consectetur voluptatem et...</p><div class="postCreated"><i class="far fa-clock blogpostdate"></i> 2022-01-03</div></div><div class="article"><h3 class="postitle"><div class="avatarBlog"><img title="celestine69" class="Avatar blogAvatar" src="http://localhost/flarum/flarum/public/assets/avatars/QBCqu2tqn7eAbSnb.png" alt=""></div><a class="blogPost" href="/flarum/flarum/public/d/95-nesciunt-sit-quia-est">Nesciunt sit quia est.</a></h3><div class="blogTagsLabel"><span class="TagsLabel blogTagsLabel"><a class="TagLabel colored" title="adfsdfsfsdfsdf" href="/flarum/flarum/public/t/tag2" style="--tag-bg:#ff00cc;"><span class="TagLabel-text"><i class="icon fas fa-bolt"></i> tag2</span></a></span><div class="coutPostBlog">9 POSTS</div></div><p class="postPreview">Exercitationem quos blanditiis porro architecto. Dolorem consequuntur deserunt vero voluptates ut non ea quis. Exercitationem exercitationem sunt ea.
Earum delectus expedita velit voluptatem et. Rerum vel enim ducimus voluptate est incidunt. A velit odit explicabo qui sint praesentium. Corrupti voluptatum blanditiis quidem occaecati porro quo minima.
Fugit sit voluptas earum occaecati incidunt quam dolores nesciunt. Sit asperiores id fugit. Dolores animi quisquam sequi placeat voluptatibus doloribus.
Veritatis inventore eius ad sed molestiae vel. Aut quo voluptates perspiciatis....</p><div class="postCreated"><i class="far fa-clock blogpostdate"></i> 2022-01-03</div></div><div class="article"><h3 class="postitle"><div class="avatarBlog"><span title="monahanlesly" class="Avatar blogAvatar" style="--avatar-bg:#a0c1e5;">M</span></div><a class="blogPost" href="/flarum/flarum/public/d/94-odio-est-incidunt">Odio est incidunt.</a></h3><div class="blogTagsLabel"><span class="TagsLabel blogTagsLabel"><a class="TagLabel colored" title="adfsdfsfsdfsdf" href="/flarum/flarum/public/t/tag2" style="--tag-bg:#ff00cc;"><span class="TagLabel-text"><i class="icon fas fa-bolt"></i> tag2</span></a></span><div class="coutPostBlog">3 POSTS</div></div><p class="postPreview">Voluptatum ducimus sunt exercitationem eaque distinctio labore rerum. Corrupti ut fugit minima. Quo non minima inventore nihil.
Nostrum aliquid corporis debitis quos. Nesciunt vel iste provident vitae quisquam. Nam deserunt optio voluptatem eius. Repellendus quae accusantium repellendus necessitatibus architecto.
Laboriosam nemo aliquid laudantium vel. Reiciendis amet autem eaque. Aspernatur nulla aut enim voluptatem illo a minus enim. Esse nemo sunt eos excepturi culpa.
Ut et laboriosam sequi in corporis. Iure omnis sed sunt voluptas mollitia laborum. Voluptatibus hic ullam non quas. Recus...</p><div class="postCreated"><i class="far fa-clock blogpostdate"></i> 2022-01-03</div></div><div class="article"><h3 class="postitle"><div class="avatarBlog"><span title="stone_schoen" class="Avatar blogAvatar" style="--avatar-bg:#a0c5e5;">S</span></div><a class="blogPost" href="/flarum/flarum/public/d/93-doloribus-est-quo-est-aut">Doloribus est quo est aut.</a></h3><div class="blogTagsLabel"><span class="TagsLabel blogTagsLabel"><a class="TagLabel colored" title="" href="/flarum/flarum/public/t/general" style="--tag-bg:#888;"><span class="TagLabel-text"> General</span></a></span><div class="coutPostBlog">3 POSTS</div></div><p class="postPreview">Possimus aut accusantium in. Repellendus ratione sit fuga sint distinctio. Non doloremque sunt porro. Voluptas non qui error.
Iste quo perferendis qui deleniti eveniet fuga. Nobis quis maxime in necessitatibus error amet explicabo. Dolor enim adipisci assumenda vero eaque optio.
Qui expedita voluptates est nesciunt necessitatibus nihil vel deserunt. Dolorem ex officia voluptates voluptatem. Quia sint minima est accusantium vel qui. Voluptas ut omnis et exercitationem.
Omnis sunt aut quibusdam necessitatibus itaque. Minima ut autem ut nam.
Est ut ex qui perspiciatis. Tempora atque velit mag...</p><div class="postCreated"><i class="far fa-clock blogpostdate"></i> 2022-01-03</div></div><div class="article"><h3 class="postitle"><div class="avatarBlog"><span title="russ_walsh" class="Avatar blogAvatar" style="--avatar-bg:#e5b6a0;">R</span></div><a class="blogPost" href="/flarum/flarum/public/d/92-voluptate-rerum-rerum-necessitatibus">Voluptate rerum rerum necessitatibus.</a></h3><div class="blogTagsLabel"><span class="TagsLabel blogTagsLabel"><a class="TagLabel colored" title="adfsdfsfsdfsdf" href="/flarum/flarum/public/t/tag2" style="--tag-bg:#ff00cc;"><span class="TagLabel-text"><i class="icon fas fa-bolt"></i> tag2</span></a></span><div class="coutPostBlog">3 POSTS</div></div><p class="postPreview">Aut aut dolor molestias accusantium atque labore. Voluptatem dolor eligendi nulla debitis nisi cumque. Quibusdam voluptas dolor eos magni aut fugit accusamus. Itaque omnis laborum distinctio rerum.
Necessitatibus et aliquam et dolores. Omnis consequuntur dolores sunt laudantium. Facilis ducimus sunt et cupiditate eos. Repellendus voluptatem nisi iusto.
Distinctio consequatur qui quod qui qui tempora blanditiis. Doloribus minima laboriosam recusandae doloribus totam perspiciatis dolorem. Eos est deleniti delectus error eaque non. Totam voluptas ratione voluptate ea vitae.
Eum voluptas molest...</p><div class="postCreated"><i class="far fa-clock blogpostdate"></i> 2022-01-03</div></div></div>i don't know how to modify the cass of each div...what is the correct way?
