How to remove padding between divs when using *ngfor in Angular

Question

In a project created in Angular, I have a popular component. Through ngFor I display an array of objects. Html popular component:

<div class="smallCard" [ngClass]="first? 'bigCard': 'smallCard'" *ngFor="let popular of populars; let first = first;">
    <img src={{popular.imageArticle}} alt="img1">
    <h3>{{ popular.title }}</h3>
    <p>{{ popular.caption }}</p>
    <reactions></reactions>                             
</div> 

Style class smallCard and bigCard:

.smallCard{   
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px 0 ;
    max-width: 310px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    background: #FFFFFF;
    max-height: 260px;  }

.bigCard{min-height: 540px;  }

I call the popular component in the parent class:

<app-popular-articles class="popular}"></app-popular-articles>

Style popular class:

.popular{
    display: flex;
    max-width: 660px;
    flex-flow: row wrap;
    justify-content: end;
    z-index: 9;
    align-content: flex-start;
}

How to remove the padding after the second element?

Answer 1

You may want to have a look at this.

Anyway you don't need any external JS or hardcoded stuff.

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 210px;
  width: 100px;
  max-width: 100px;
  gap: 8px;
}

.card { 
    width: 50px;
  height: 25px;
  background-color: rgba(150,150,150,0.5)
}

.big-card {
  height: 50px;
  background-color: rgba(150,255,150,0.5)
}

<div class="wrapper">
      <div class="card big-card">Test</div>
      <div class="card">Test</div>
      <div class="card">Test</div>
      <div class="card">Test</div>
      <div class="card">Test</div>
      <div class="card">Test</div>
      <div class="card">Test</div>
      <div class="card">Test</div>
</div>