title: angular material responsive grid layout on horizontal scroll
body: <p>I have a 4 x 2 column grid on large screens, looks good. I'm trying to make it when it goes to tablet size, then make the grid 3 x 2 and on mobile 2 x 4.</p>
  
  <p>I played around with <code>flex-sm</code> but couldn't seem to figure out how to push things around.</p>
  
  <p>If this helps, the end results I'm trying to get is a horizontal scroll of cards. Large screens will have 4 columns, tablets will have 3 columns, and mobile will have 2 columns. Then the user can scroll left and right to load more and see other columns.</p>
  
  <p>Here is the code i'm working with</p>
  
  <pre><code>        &lt;div flex layout="column" layout-margin&gt;
              &lt;md-content&gt;
                  &lt;div layout="row"&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div layout="row"&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="20" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/md-content&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>Edit</strong>:</p>
  
  <p>looks like <code>layout-wrap</code> and or <code>mdGridList API</code> might be my solution. but i'm having trouble getting a default amount of rows at start. example, i moved everything to one row and added <code>layout-wrap</code> but the effect i get on desktop is card1 card2 card3 card4 card5, second row (wrapped elements) card 6, blank, card 7, blank, card 8.</p>
  
  <pre><code>        &lt;div flex layout="column" layout-margin&gt;
              &lt;md-content&gt;
                  &lt;div layout="row" layout-wrap&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                      &lt;div layout="column" flex="auto"&gt;&lt;/div&gt;
                      &lt;div flex="25" flex-md="33" flex-sm="45" layout="column" layout-align="start center"&gt;
                          &lt;md-card&gt;&lt;/md-card&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/md-content&gt;
          &lt;/div&gt;
  </code></pre>