How to get a responsive grid layout in Ionic 2
<p>It is very unclear how to create a responsive layout grid in Ionic 2. I hope someone can shed some light onto this topic. </p>

<p>I got a <a href="http://ionicframework.com/docs/v2/components/#grid" rel="nofollow noreferrer">grid</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-html lang-html prettyprint-override"><code>&lt;ion-content class="home card-background-page" padding&gt;
  &lt;ion-row wrap&gt;
    &lt;ion-col&gt;
      &lt;ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)"&gt;
        &lt;img [src]="location.data.coverArt"/&gt;
        &lt;div class="card-title"&gt;{{location.data.name}}&lt;/div&gt;
        &lt;div class="card-subtitle"&gt;{{location.data.date}}&lt;/div&gt;
      &lt;/ion-card&gt;
    &lt;/ion-col&gt;
  &lt;/ion-row&gt;
&lt;/ion-content&gt;</code></pre>
</div>
</div>
</p>

<p>I want the ion-col as a max-width of, let say 500px. Then if the view is larger than 500px like in a iPad landscape, I want the col wrap - 2 col in a row and they are center aligned. I added the wrap attribute on to the row and it does not seem to works. </p>

<p>Also, is there responsive grid in Ionic2? If so, how can I use it? I also want the ion-content has a max-width and will align center when the screen width is larger than the max-width. Right now, the ion-content is position absolute and won't allow center. </p>

<p>What is the best strategy to dong responsive layout with Ionic 2? </p>