Currently, I am delving into Angular 2. In my template, I have set up a code snippet to display data fetched from APIs:
<div class="blocks">
<div router-active class="block" *ngFor="let item of items">
<div class="inblock">
<p class="title">{{ item.name }}:</p>
</div>
</div>
</div>
Everything is functioning properly. However, when one div's height exceeds others, it creates an uneven row like the image below:
https://i.sstatic.net/oHcQq.png
I envision having a neat row with only three divs each before starting a new block. Although I know how to achieve this normally, I am struggling to implement it in Angular 2!
UPDATE: I am not looking for a fixed height solution since the content length can vary. Therefore, applying a fixed height through CSS won't resolve the issue.