title: Align mat-cards content (image, text and buttons)
body: <p>I'm working with <code>mat-card</code> in a list and I have a problem with the alignment.</p>
  <p>Here is what I have:</p>
  <p><a href="https://i.stack.imgur.com/VvLRH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VvLRH.png" alt="enter image description here" /></a></p>
  <p>Here is what I want:</p>
  <p><a href="https://i.stack.imgur.com/iGO5o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iGO5o.png" alt="enter image description here" /></a></p>
  <p>The code :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;margin-top-20&quot; fxFlexFill fxLayout=&quot;row wrap&quot; fxLayout.xs=&quot;column&quot; fxLayout.sm=&quot;column&quot; fxLayoutGap=&quot;15px grid&quot;&gt;
    &lt;div fxFlex=&quot;20&quot; fxFlex.md=&quot;33&quot; *ngFor=&quot;let advert of adverts; let i = index&quot; class=&quot;padding-fix&quot;&gt;
      &lt;div fxFlexFill fxLayoutAlign=&quot;center stretch&quot;&gt;
        &lt;mat-card class=&quot;ad&quot;&gt;
          &lt;div fxLayoutAlign=&quot;space-between center&quot;&gt;
            &lt;img mat-card-image src=&quot;test&quot; alt=&quot;test&quot;&gt;
          &lt;/div&gt;
          &lt;mat-card-title&gt;test&lt;/mat-card-title&gt;
          &lt;mat-card-content&gt;
            &lt;p&gt;
              test
            &lt;/p&gt;
          &lt;/mat-card-content&gt;
          &lt;mat-card-actions align=&quot;end&quot;&gt;
          &lt;/mat-card-actions&gt;
        &lt;/mat-card&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I didn't understand I can I centre the image (resize it if necessary).</p>
  <p><strong>EDIT:</strong> Thank coreuter's answer, I'm close to getting what I want.</p>
  <p><a href="https://i.stack.imgur.com/TbmeF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TbmeF.jpg" alt="enter image description here" /></a></p>
  <p>the first block is not at the same height as the others. And I've got some blank space at the end of each row (I would like 5 elements per row).</p>
  <p>The updated code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;margin-top-20&quot; fxLayout=&quot;row wrap&quot; fxLayoutAlign=&quot;start center&quot; fxLayoutGap=&quot;15px&quot;&gt;
    &lt;mat-card fxFlex=&quot;20&quot; (click)=&quot;addProduct()&quot; class=&quot;mat-card-add-button&quot;&gt;
      &lt;div&gt;
        &lt;span style=&quot;font-size:32px;text-align:center&quot;&gt;+&lt;br/&gt;Add product&lt;/span&gt;
      &lt;/div&gt;
    &lt;/mat-card&gt;
    &lt;mat-card fxFlex=&quot;20&quot; *ngFor=&quot;let product of products; let i = index&quot; class=&quot;product&quot;&gt;
      &lt;img class=&quot;image&quot; mat-card-image src=&quot;{{product.picture.uri}}&quot; alt=&quot;photo&quot;&gt;
      &lt;mat-card-title&gt;{{product.name}}&lt;/mat-card-title&gt;
      &lt;mat-card-content&gt;
        &lt;p&gt;
          test
        &lt;/p&gt;
      &lt;/mat-card-content&gt;
      &lt;mat-card-actions align=&quot;end&quot;&gt;
      &lt;/mat-card-actions&gt;
    &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>EDIT 2:</strong></p>
  <p>I think it's almost perfect. I tried with a big content inside the <code>mat-card-content</code> <code>div</code> and I don't know if it's good. Here is a screenshot of what I have:</p>
  <p><a href="https://i.stack.imgur.com/gNXLA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gNXLA.png" alt="enter image description here" /></a></p>
  <p>Do you think it possible to get the buttons at the same height as the big <code>mat-card</code> (the last one)? Another thing, I can't see the <code>border-left</code> of the first element of each row.</p>
  <p>Here the updated code :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;margin-top-20&quot; fxFlexFill fxLayout=&quot;row wrap&quot; fxLayoutAlign=&quot;start start&quot; fxLayoutGap=&quot;20px&quot;&gt;
      &lt;mat-card fxLayoutAlign=&quot;center center&quot; fxFlex=&quot;0 1 calc(20% - 20px)&quot; (click)=&quot;addProduct()&quot; class=&quot;product&quot; style=&quot;height:413px&quot;&gt;
          &lt;div&gt;
              &lt;span fxLayoutAlign=&quot;center center&quot; style=&quot;font-size:32px;text-align:center&quot;&gt;+&lt;br /&gt;Add product&lt;/span&gt;
          &lt;/div&gt;
      &lt;/mat-card&gt;
      &lt;mat-card fxFlexFill fxFlex=&quot;0 1 calc(20% - 20px)&quot; *ngFor=&quot;let product of products; let i = index&quot; class=&quot;product&quot;&gt;
          &lt;img class=&quot;image&quot; mat-card-image src=&quot;{{product.picture.uri}}&quot; alt=&quot;photo&quot;&gt;
          &lt;mat-card-title&gt;{{product.name}}&lt;/mat-card-title&gt;
          &lt;mat-card-content&gt;
              &lt;p *ngIf=&quot;i == 3&quot;&gt;
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, leo id pulvinar vestibulum, ligula nisl tincidunt magna, eu volutpat leo neque quis justo. Fusce semper ante id mi porta porta. Pellentesque nec pretium purus. Curabitur lobortis tempus consectetur. Nam ullamcorper gravida erat sed suscipit. Morbi quis porttitor nunc. Suspendisse lacinia a turpis vitae laoreet. Aliquam pellentesque scelerisque urna. Cras vulputate nisi sed elit commodo cursus. Aenean interdum, erat at convallis dictum, urna enim tincidunt nisi, vitae tempor nisi nisi a tellus. Aliquam volutpat dui eget gravida eleifend. Nullam pulvinar justo eget tellus commodo, eget molestie dui convallis. Curabitur at fermentum lorem. Maecenas porttitor sem ut enim efficitur bibendum et vel metus.
              &lt;/p&gt;
              &lt;p *ngIf=&quot;i != 3&quot;&gt;
                     test
              &lt;/p&gt;
          &lt;/mat-card-content&gt;
          &lt;mat-card-actions align=&quot;end&quot;&gt;
              &lt;button mat-icon-button&gt;
                  &lt;mat-icon&gt;mode_edit&lt;/mat-icon&gt;
              &lt;/button&gt;
              &lt;button mat-icon-button&gt;
                  &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/mat-card-actions&gt;
      &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thank you again for your help, I really appreciate it!</p>
  <p><strong>EDIT 3</strong>: This version works! Thank you very much coreuter! <a href="https://stackblitz.com/edit/angular-xprafs" rel="nofollow noreferrer">See it on StackBlitz</a>.</p>
  <p>The <code>mat-card-content</code> is not fixed by the &quot;fxFlex&quot; property. The content goes outside the mat-card. (It's working on the last StackBlitz but not for me).</p>
  <p><a href="https://i.stack.imgur.com/EqY6D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EqY6D.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mat-card {
      padding: 18px !important; /* less padding than per default */
  }
  
  .mat-card-image {
      width: calc(100% + 36px) !important; /* update padding */
      margin: 0 -24px 16px -18px !important; /* update padding */
  }
  
  .mat-tab-label {
      font-size: 16px !important;
  }
  
  .mat-card-title {
      font-size:24px !important;
      font-weight: 500 !important;
  }
  
  .mat-card-content {
      font-size: 14px !important;
      min-height: 30px; /* &lt;--- to remove !!! */
  }
  
  .product {
      margin-bottom: 25px;
      /*min-width: 180px;
      text-align: center;*/
  } 
  
  /* desktop button */
  .mat-card-add-button {
      border: 1px dashed grey;
      box-shadow:none !important;
      cursor:pointer;
  }
  
  .product img {
      height: 250px;
      object-fit: contain;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div *ngIf="products.length &gt; 0" style="margin-left:10px;"&gt;
      &lt;div fxLayout="row wrap" fxLayoutAlign="start stretch" fxLayoutGap="20px"&gt;
          &lt;mat-card fxLayoutAlign="center center" fxFlex="0 1 calc(20% - 20px)" fxFlex.md="0 1 calc(25% - 20px)" fxFlex.sm="0 1 calc(33% - 20px)" fxHide.xs="true" (click)="addProduct()" class="product mat-card-add-button"&gt;
              &lt;div fxLayoutAlign="center center" style="font-size:32px;text-align:center"&gt;+&lt;br /&gt;Add product&lt;/div&gt;
          &lt;/mat-card&gt;
          &lt;mat-card fxLayout="column" fxFlex.md="0 1 calc(25% - 20px)" fxFlex="0 1 calc(20% - 20px)" fxFlex.sm="0 1 calc(33% - 20px)" fxFlex.xs="100" *ngFor="let product of products; let i = index" class="product"&gt;
              &lt;img mat-card-image src="{{product.picture.uri}}" alt="photo"&gt;
              &lt;mat-card-title&gt;{{product.name}}&lt;/mat-card-title&gt;
              &lt;mat-card-content fxFlex&gt;
                      &lt;p *ngIf="i == 3"&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, leo id pulvinar vestibulum, ligula nisl tincidunt
                          magna, eu volutpat leo neque quis justo. Fusce semper ante id mi porta porta. Pellentesque nec pretium purus. Curabitur
                          lobortis tempus consectetur. Nam ullamcorper gravida erat sed suscipit. Morbi quis porttitor nunc. Suspendisse lacinia
                          a turpis vitae laoreet. Aliquam pellentesque scelerisque urna. Cras vulputate nisi sed elit commodo cursus. Aenean interdum,
                          erat at convallis dictum, urna enim tincidunt nisi, vitae tempor nisi nisi a tellus. Aliquam volutpat dui eget gravida
                          eleifend. Nullam pulvinar justo eget tellus commodo, eget molestie dui convallis. Curabitur at fermentum lorem. Maecenas
                          porttitor sem ut enim efficitur bibendum et vel metus.
                      &lt;/p&gt;
                      &lt;p *ngIf="i != 3"&gt;
                          test
                      &lt;/p&gt;
              &lt;/mat-card-content&gt;
              &lt;mat-card-actions fxFlexAlign="end" align="end"&gt;
                  &lt;button mat-icon-button&gt;
                      &lt;mat-icon&gt;mode_edit&lt;/mat-icon&gt;
                  &lt;/button&gt;
                  &lt;button mat-icon-button&gt;
                      &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
                  &lt;/button&gt;
              &lt;/mat-card-actions&gt;
          &lt;/mat-card&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>