title: Ionic 3 grid size won't adapt to smaller screen
body: <p>I have an Ionic 3 mobile app that I have developed, where I have form fields that I setup in a grid.</p>
  
  <p>There are 3 columns that should appear side-by-side.</p>
  
  <p>In most models it looks fine, but when I view it on an iPhone 5s or even on 6s, the fields do not appear side-by-side. </p>
  
  <p>Instead, the input field drops a line and fills out 100% of the width, with the other columns at the top.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;ion-grid fixed *ngIf="showPhone"&gt;
    &lt;ion-row class="edit-field"&gt;
      &lt;ion-col col-auto class="field-icon"&gt;
        &lt;ion-icon name="md-remove-circle"&gt;&lt;/ion-icon&gt;
      &lt;/ion-col&gt;
      &lt;ion-col col-auto class="field-type"&gt;
        &lt;select name="phoneType" [(ngModel)]="phoneData.phone_type"&gt;
          &lt;option value="select"&gt; -- Select -- &lt;/option&gt;
          &lt;option value="home"&gt;home&lt;/option&gt;
          &lt;option value="mobile"&gt;mobile&lt;/option&gt;
          &lt;option value="business"&gt;business&lt;/option&gt;
          &lt;option value="home fax"&gt;home fax&lt;/option&gt;
          &lt;option value="work fax"&gt;work fax&lt;/option&gt;
          &lt;option value="fax"&gt;fax&lt;/option&gt;
        &lt;/select&gt;
      &lt;/ion-col&gt;
      &lt;ion-col class="field-input"&gt;
        &lt;input type="text" 
        [(ngModel)]="phoneData.phone_number" 
        (blur)="addPhone(phoneData)"
        placeholder="Phone"&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  &lt;/ion-grid&gt;
  </code></pre>
  
  <p>Howe can I make it so that it adapts when viewed on a smaller screen?</p>