Angular Material 2 md-card responsive columns
Solution 1
First, add @angular/flex-layout
package in your app. Read more about "flex-layout". Then, you need to import FlexLayoutModule
in your app.module.ts
imports entry:
import { FlexLayoutModule } from '@angular/flex-layout';
....
@NgModule({
imports: [
// other modules
// .....
FlexLayoutModule
],
....
You can then use "flex-layout" in your app. To make the cards responsive as you have mentioned, you can use the following template:
<div fxLayout="row" fxLayout.xs="column">
<md-card fxFlex="40%;" fxFlex.xs="80%">
<md-card-content>
<h2>Left Card 1</h2>
</md-card-content>
</md-card>
<md-card fxFlex="40%;" fxFlex.xs="80%">
<md-card-content>
<h2>Left Card 2</h2>
</md-card-content>
</md-card>
<md-card fxFlex="20%;" fxFlex.xs="80%">
<md-card-content>
<h2>Right Column </h2>
</md-card-content>
</md-card>
</div>
Link to stackblitz demo.
Solution 2
I found a CSS flex box solution—I’d still prefer an Angular flex layout answer, but this will do for now. Thanks to @Faisal for pointing me in the right direction. This produces two columns on a large screen with two rows in the first column. If the screen is small, the layout changes to one column with three rows.
I based the code on this example: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
HTML:
<div id='main'>
<div id='col1'>
<article>article</article>
<nav>nav</nav>
</div>
<aside>aside</aside>
</div>
CSS:
#main {
min-height: 100px;
margin: 0;
padding: 0;
display: flex;
flex-flow: row;
}
#main > col1 {
min-height: 100px;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
}
#col1 > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#col1 > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #dddd88;
flex: 1 6 20%;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 3;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
flex-direction: column;
}
#col1 > article, #col1 > nav, #main > aside {
/* Return them to document order */
order: 0;
}
#main > col1, #main > aside {
min-height: 50px;
max-height: 50px;
}
}
![beachCode](https://i.stack.imgur.com/8LVs6.jpg?s=256&g=1)
beachCode
Updated on June 09, 2022Comments
-
beachCode about 2 years
I'm searching for an Angular 2/4 example of this layout. I need to start with two columns of cards (2 in left col, 1 in right col). However, if the screen is small, they should collapse to one column. I can do it in CSS with divs, but there must be an easy way in Material 2--there are lots of Material 1 examples.
This code is adapted from an Angular Material 1 answer, but it's not working (I changed "row" to "column" hoping that would work but I just get one column with the three cards):
how do i create a grid of cards with angular material?
<div class='md-padding' layout="column" layout-wrap> <md-card flex="40" flex-sm="80"> <md-card-content> <h2>Left Card 1</h2> </md-card-content> </md-card> <md-card flex="40" flex-sm="80"> <md-card-content> <h2>Left Card 2</h2> </md-card-content> </md-card> </div> <div class='md-padding' layout="column" layout-wrap> <md-card flex="40" flex-sm="80"> <md-card-content> <h2>Right Column </h2> </md-card-content> </md-card> </div>
From the answer: "In this example, you will have two cards (40% each) and when the screen resizes to -sm, the cards will be at 80%."
-
beachCode almost 7 yearsthx. Your example produces 3 columns on a large screen. I'm looking for 2 cols--one of which has 2 rows--and then all in 1 column on a small screen. I'm looking at the flex-layout docs now. They have an example that's close to what I want here: tburleson-layouts-demos.firebaseapp.com/#/responsive