title: Ionic 3 ion-grid on ion-card align
body: <p>How can I align and trim my grid? The columns were not right, were not one below the other and choose the divisions.</p>
  
  <p><a href="https://i.stack.imgur.com/lB85A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lB85A.png" alt="Image here pls check"></a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-card&gt;
      &lt;ion-card-header&gt;
          &lt;p style="margin-left: 5%"&gt; last orders buy &lt;/p&gt;
      &lt;/ion-card-header&gt;
      &lt;ion-card-content padding-right &gt;
          &lt;ion-grid style="width: ; "&gt; 
              &lt;ion-row&gt;
                  &lt;ion-col col-1 style="font-size: 10px"&gt;
                      ID 
                  &lt;/ion-col&gt;
                  &lt;ion-col col-3 style="font-size: 10px"&gt;
                      Operação
                  &lt;/ion-col&gt;
                  &lt;ion-col col-1 style="font-size: 9px; margin-top: 1px"&gt;
                      De
                  &lt;/ion-col&gt;
                  &lt;ion-col col-1 style="font-size: 10px "&gt;
                      P/
                  &lt;/ion-col&gt;
                  &lt;ion-col col-2 style="font-size: 10px"&gt;
                      Volume
                  &lt;/ion-col&gt;
                  &lt;ion-col col-2 style="font-size: 10px"&gt;
                      Valor
                  &lt;/ion-col&gt;
                  &lt;ion-col col-2 style="font-size: 10px"&gt;
                      Status
                  &lt;/ion-col&gt;
              &lt;/ion-row&gt;
              &lt;ion-row style="margin-left: -20px" *ngFor="let dado of dados" &gt;
                  &lt;ion-list&gt;
                      &lt;ion-item-sliding #item&gt;
                      &lt;ion-item&gt;
                      &lt;ion-col col-1  style="font-size:10px"&gt;
                          #{{dado.id}}
                      &lt;/ion-col&gt;
                      &lt;ion-col col-3 style="font-size:10px"&gt;
                          {{dado.operation}}
                      &lt;/ion-col&gt;
                      &lt;ion-col col-1 style="font-size:10px"&gt;
                          {{dado.from_currency}}
                      &lt;/ion-col&gt;
                      &lt;ion-col col-1 style="font-size:10px"&gt;
                          {{dado.to_currency}}
                      &lt;/ion-col&gt;
                      &lt;ion-col col-2 style="font-size:10px"&gt;
                          {{dado.value_in_currency}}
                      &lt;/ion-col&gt;
                      &lt;ion-col col-2 style="font-size:10px"&gt;
                          {{dado.value_brl}}
                      &lt;/ion-col&gt;
                      &lt;ion-col col-2 style="font-size:10px"&gt;
                          {{dado.operation}}
                      &lt;/ion-col&gt;
                &lt;/ion-item&gt; 
            &lt;ion-item-options side="right"&gt;
                &lt;button ion-button color="danger" (click)="share(item)"&gt;Cancelar&lt;/button&gt;
            &lt;/ion-item-options&gt;
        &lt;/ion-item-sliding&gt;
                  &lt;/ion-list&gt;
              &lt;/ion-row&gt;
          &lt;/ion-grid&gt;
      &lt;/ion-card-content&gt;
  &lt;/ion-card&gt;
  </code></pre>