I'm learning to use Angular and I have a problem about how to show data in column.

In my app.components.ts I have:

<div  *ngFor="let person of people">
  <app-card-person [person]="person"></app-card-person>
</div>

// people is an array of objects 

In my card-person.component.ts

<div  style="width: 18rem;">
    <!-- <img src="..."  alt="..."> -->
    <div >
        <h5 >{{person?.name}} {{person?.surname}}</h5>
        <p >{{person?.description}}</p>
        <!-- <a href="#" >Go somewhere</a> -->
    </div>
</div>

In this way I obtain a list of card but they are 1 for row:

CARD1
CARD2
CARD3
.....

What I would to obtain is:

CARD1                        CARD2
CARD3                        CARD4
.....                        .....

CodePudding user response：

Solution 1: Work with flexbox

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 50%;
}

<div >
  <div  *ngFor="let person of people">
    <app-card-person [person]="person"></app-card-person>
  </div>
</div>

Result

Sample Solution 2 on StackBlitz

CodePudding user response：

CSS Grid

In your app.component.scss

.cardComp {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px; // gap between columns
}