title: How to make GridLayout in NativeScript Angular suitable for (potrait/landscape)
body: <p>I have approx 25 fields to display in one page so I would like to display two or three fields per row.</p>
  
  <p>I have made below layout but is not responsive to the device width (potrait/landscape)</p>
  
  <p>Here is my code, also play link is available <a href="https://play.nativescript.org/?template=play-ng&amp;id=AqwG4J" rel="nofollow noreferrer">here</a>.</p>
  
  <pre><code>&lt;StackLayout&gt;
      &lt;GridLayout columns="auto, *, auto" rows="auto, 25"&gt;
          &lt;Label col="0" [colSpan]="1" text="Check 1" class=" h3 m-x-10 m-y-auto"&gt;&lt;/Label&gt;
          &lt;Switch col="1" [colSpan]="1"&gt; &lt;/Switch&gt;
          &lt;Label col="2" [colSpan]="1" text="Check 2" class=" h3 m-x-10 m-y-auto"&gt;&lt;/Label&gt;
          &lt;Switch col="3" [colSpan]="1"&gt; &lt;/Switch&gt;
      &lt;/GridLayout&gt;
      &lt;GridLayout columns="auto, *, auto" rows="auto, 25"&gt;
          &lt;TextField col="0" hint="Branch Code" class=" h3 m-x-10 m-y-auto"&gt;&lt;/TextField&gt;
          &lt;Label col="1" text="test date" class=" h3 m-x-10 m-y-auto"&gt;&lt;/Label&gt;
      &lt;/GridLayout&gt;
      &lt;GridLayout columns="auto, *, auto" rows="auto, 25"&gt;
          &lt;TextField col="0" hint="Name" class=" h3 m-x-10 m-y-auto"&gt;&lt;/TextField&gt;
          &lt;TextField col="1" hint="Address" class=" h3 m-x-10 m-y-auto"&gt;&lt;/TextField&gt;
          &lt;TextField col="2" hint="Mobile" class=" h3 m-x-10 m-y-auto"&gt;&lt;/TextField&gt;
      &lt;/GridLayout&gt;
  &lt;/StackLayout&gt;
  </code></pre>
  
  <p>I trid with <code>width="60"</code> somehow works but I want it to responsive width instead of fixed width.</p>
  
  <p>I there a sample workaround for this?</p>