Tengo marcado en un proyecto angular que se ve así.

 <div class="smallCard" *ngFor="let popular of populars"> <img class="smallCardImg" src={{popular.imageArticle}} alt="img1"> <h3>{{ popular.title }}</h3> <p>{{ popular.caption }}</p> <div class="caption_container"> <img class="reactionImg" src={{popular.imageUser}} alt="user"> <a class="reactionName" href="">{{ popular.nameUser }}</a> <ul class="reactions"> <img class="reactionsVector" src="assets/img/Vector.svg" alt="kudos"> <li class="reactionsText">{{popular.kudos}}</li> <img class="reactionsVector" src="assets/img/star.svg" alt="star"> </ul> </div> </div>

La clase de estilo smallCard se ve así:

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

Y tengo una serie de elementos como este:

 export const populars = [ { id: 1, title: 'How To Add Confidence Intervals to Any Model', caption: 'I would like to add another technique to your toolkit — confidence intervals', kudos: 147, imageUser: 'assets/img/folkman.png', nameUser: 'Tyler Folkman', imageArticle: 'assets/img/Image.png', }, { id: 2, title: 'What's New in JavaScript — ES2019', kudos: 120, imageUser: 'assets/img/folkman.png', nameUser: 'Tyler Folkman', imageArticle: 'assets/img/ImageSmall2.png', }, { id: 3, title: 'How To Fake Being a Good Programmer', kudos: 89, imageUser: 'assets/img/folkman.png', nameUser: 'Tyler Folkman', imageArticle: 'assets/img/ImageSmall3.png', }, { id: 4, title: 'Reduce Memory Usage and Make Your Python Code Faster Using Generators', kudos: 21, imageUser: 'assets/img/folkman.png', nameUser: 'Tyler Folkman', imageArticle: 'assets/img/ImageSmall4.png', }, { id: 5, title: 'Here Are 11 Console Commands Every Developer Should Know', kudos: 3, imageUser: 'assets/img/folkman.png', nameUser: 'Tyler Folkman', imageArticle: 'assets/img/ImageSmall5.png', } ]

Quiero recorrer esta matriz y completar la salida de un elemento en un div de 540 px de largo y el resto de los elementos en un div de 260 px de largo. ¿Cómo hacerlo con la directiva * ngFor correctamente? Diseño en la imagen.