title: Ionic 4 responsive grid
body: <p>I need an ion-grid with 3 columns. And the columns with first and last have size of content. In that column i would like to add icon or small image.And the column in center should have large text with overflow:hidden;text-overflow: ellipsis;
      white-space: nowrap;.</p>
  
  <p>I tried with this code</p>
  
  <pre><code>&lt;ion-grid&gt;
          &lt;ion-row&gt;
              &lt;ion-col size="auto" style="border: 1px solid;"&gt;
                  image
              &lt;/ion-col&gt;
              &lt;ion-col style="border: 1px solid; 
  overflow:hidden;  
  text-overflow: ellipsis;  
      white-space: nowrap;"&gt;
                  &lt;div&gt;
                      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                      Lorem Ipsum has been the industry's standard dummy text ever since the 
                    &lt;/div&gt;
              &lt;/ion-col&gt;
              &lt;ion-col size="auto" style=" border: 1px solid; "&gt;
                  icon
              &lt;/ion-col&gt;
          &lt;/ion-row&gt;
      &lt;/ion-grid&gt;
  </code></pre>
  
  <p>but i can't place the column in middle correctly.it displays in device max width (in separate row).how can i do this?</p>