When placing a swiper-container inside a mat-grid-tile within an Angular Material mat-grid-list, the swiper component doesn’t display correctly by default. The slides either don't take up the full space, or they have layout issues.

To fix this, add width: 100% to the swiper-container. This will make it take up the full width of the mat-grid-tile, allowing the swiper to render and distribute the slides correctly.

swiper-container { width: 100%; }