title: Responsive 2 column layout in Angular Material with mat-grid-list
body: <p>I want to create an Angular Page with 2 columns and many rows. I was able to achieve it with <code>mat-grid-list</code>. The grid will have <code>mat-card</code> inside of it.</p>
  <pre><code>&lt;div class=&quot;grid-container&quot;&gt;
      &lt;h1 class=&quot;mat-h1&quot;&gt;Account&lt;/h1&gt;
      &lt;mat-grid-list cols=2&gt;
          &lt;mat-grid-tile&gt;
              &lt;mat-card class=&quot;account-card&quot;&gt;
                  &lt;mat-card-header&gt;
                      &lt;mat-card-title&gt;
                          Address
                          &lt;button mat-icon-button class=&quot;more-button&quot; [matMenuTriggerFor]=&quot;menu&quot; aria-label=&quot;Toggle menu&quot;&gt;
                              &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
                          &lt;/button&gt;
                          &lt;mat-menu #menu=&quot;matMenu&quot; xPosition=&quot;before&quot;&gt;
                              &lt;button mat-menu-item&gt;Expand&lt;/button&gt;
                              &lt;button mat-menu-item&gt;Remove&lt;/button&gt;
                          &lt;/mat-menu&gt;
                      &lt;/mat-card-title&gt;
                  &lt;/mat-card-header&gt;
                  &lt;mat-card-content class=&quot;dashboard-card-content&quot;&gt;
                      &lt;table class=&quot;example-full-width&quot; cellspacing=&quot;0&quot;&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;mat-form-field appearance=&quot;outline&quot;&gt;
                                      &lt;mat-label&gt;First Name&lt;/mat-label&gt;
                                      &lt;input matInput disabled placeholder=&quot;Placeholder&quot; [value]='(claim$ | async)?.given_name'&gt;
                                  &lt;/mat-form-field&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;mat-form-field appearance=&quot;outline&quot;&gt;
                                      &lt;mat-label&gt;Last Name&lt;/mat-label&gt;
                                      &lt;input matInput disabled placeholder=&quot;Placeholder&quot; [value]='(claim$ | async)?.family_name'&gt;
                                  &lt;/mat-form-field&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/mat-card-content&gt;
              &lt;/mat-card&gt;
          &lt;/mat-grid-tile&gt;
          &lt;mat-grid-tile&gt;
              &lt;mat-card class=&quot;account-card&quot;&gt;
                  &lt;mat-card-header&gt;
                      &lt;mat-card-title&gt;
                          Subscription
                          &lt;button mat-icon-button class=&quot;more-button&quot; [matMenuTriggerFor]=&quot;menu&quot; aria-label=&quot;Toggle menu&quot;&gt;
                              &lt;mat-icon&gt;more_vert&lt;/mat-icon&gt;
                          &lt;/button&gt;
                          &lt;mat-menu #menu=&quot;matMenu&quot; xPosition=&quot;before&quot;&gt;
                              &lt;button mat-menu-item&gt;Expand&lt;/button&gt;
                              &lt;button mat-menu-item&gt;Remove&lt;/button&gt;
                          &lt;/mat-menu&gt;
                      &lt;/mat-card-title&gt;
                  &lt;/mat-card-header&gt;
                  &lt;mat-card-content class=&quot;dashboard-card-content&quot;&gt;
                      &lt;div&gt;
                          &lt;table class=&quot;example-full-width&quot; cellspacing=&quot;0&quot;&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      &lt;mat-form-field appearance=&quot;outline&quot;&gt;
                                          &lt;mat-label&gt;Subscription Group&lt;/mat-label&gt;
                                          &lt;input matInput disabled placeholder=&quot;Placeholder&quot; [value]=''&gt;
                                      &lt;/mat-form-field&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/mat-card-content&gt;
              &lt;/mat-card&gt;
          &lt;/mat-grid-tile&gt;
      &lt;/mat-grid-list&gt;
  &lt;/div&gt;
  </code></pre>
  <p>There are two issues with my code. The <code>mat-card</code> is displayed in the center of the two columns. Secondly it is not responsive when I change the browser size.</p>
  <p>How can I:</p>
  <ol>
  <li>Set the widths of the two columns to the size of the card (or 2 columns), and leave empty space after the second card so the cards are aligned to the left?</li>
  <li>When the browser size changes, I want to stack the card from the second column to the bottom of the first one.</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/eq8hw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eq8hw.png" alt="enter image description here" /></a></p>