I am trying to make these vertical cards into horizontal cards.
I am using the Cards component from Angular Material.
I can create cards only vertically, but I need the cards arranged on a horizontal level.
Here I'm attaching my code for reference.
HTML:
<body> <div class="wrap"> <!-- <img class="img-bg" background-image src="assets/logo.png"> --> <div class="text"> <h1 style="font-weight: bold; text-align: center;">Welcome to Data Portal...</h1> <br> <mat-card class="example-card"> <mat-card-header> <mat-card-title>Catalog</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about users/roles.</p> </mat-card-content> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card> <br> <mat-card class="example-card"> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card> </div> </div> </body>CSS:
.example-card { height: 200px; width: 400px; max-width: 300px; margin-left: 100px; background-color: lightgrey; color: black; text-align: center; }3 Answers
Create a container for all the mat-cards, then change the flow of the elements inside the container using CSS. For example:
<div style="display: flex;"> <mat-card>...</mat-card> <mat-card>...</mat-card> </div> <div fxLayout="row wrap" fxLayoutGap="16px grid"> <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%"> <mat-card class="mat-elevation-z4" > </mat-card> </div> See link below for reference https://zoaibkhan.com/blog/create-a-responsive-card-grid-in-angular-using-flex-layout-part-1/
1You need a container for mat-cards first, then you can set flex to make it horizontal or even vertical if you want. Some code is below maybe will help you.
.wrap{ display: flex; margin: 0 auto //center the content } .example-card{ border: 1px solid black; border-radius: 5px; text-align: center; height: 200px; width: 400px; max-width: 300px; margin-left: 100px; background-color: lightgrey; color: black; text-align: center; }<div class="wrap"> <mat-card class="example-card"> <mat-card-header> <mat-card-title>Catalog</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about users/roles.</p> </mat-card-content> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card> <br> <mat-card class="example-card"> <mat-card-header> <mat-card-title>Data Portal</mat-card-title> </mat-card-header> <mat-card-content> <p>Here you can find the details about all the databases and tables.</p> </mat-card-content> </mat-card> </div>ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobm5rZmaGeYSOoaawZaSkeq6typ5koaeinsewutOao2abkaextHnUrKCnn12Wu6jBy5qpZqWRqbKztcCl