All about the GridLayout

The GridLayout is one of the three most used layouts you will use in your NativeScript application (the others are FlexboxLayout and StackLayout). This is the layout that allows you to build complex layouts easily.  To use the GridLayout is very much like the enhanced table in HTML.  You are basically going to want to take your screen area and divide your screen into the pieces you need. It will allow you to tell the columns (or rows) to be a percentage of the remaining width (and height) of the screen. The grid supports three types of values; absolute size, a percentage of remaining space, and used space. 

For absolute size, you just type in the number. For example, 100 means it will use 100 dp of space. 

If you take the smallest iOS device supported, it has a screen width of 320dp. For other devices, such as tablets, some have a width of 1024 dp. So, 100 dp would be almost one third of an iOS phone, where it is one tenth of the screen on a tablet. So, this is something you need to think about when using fixed absolute values. It is typically better to use the used space over a fixed value, unless you are needing to constrain the column to a specific size.

To use remaining space-based values , that is, *, the * tells it to use the rest of the remaining space. If the columns (or rows) is set to *, *, then space will be divided into two equal remainders of space. Likewise, rows="*,*,*,*,*" will specify five equal sized rows. You can also specify things, such as columns="2*,3*,*", and you will get three columns; the first column will be two sixth of the screen, the second column will be three sixth of the screen, and the final column will be one sixth of the screen (that is, 2+3+1 = 6).  This allows you great flexibility in how to use the remainder of the space.

The third type of sizing is space used. So what happens is the content inside the grid is measured and then the column is assigned the size that is the max used in that column (or row). This is very useful when you have a grid where you have data but you aren't sure of the size or you don't really care; you just want it to look good. So, this is the auto keyword. I might have columns="auto,auto,*,auto". This means columns 1,2, and 4 will all be automatically sized based on the content inside those columns; and column 3 will use whatever space is left over. This is very useful for laying out the entire screen or parts of the screen where you are looking for a certain look.

The final reason why the GridLayout is one of the best layouts is that when you assign items to the GridLayout, you can actually assign multiple items to the same rows and/or columns and you can use row or column spans to allow items to use more than one row and/or column.

To assign an object, you just assign it via row="0" and/or col="0" (keep in mind these are index-based positions). You can also use rowSpan and colSpan to make an element span multiple rows and/or columns. Overall, the GridLayout is the most versatile layout and allows you to easily create almost any layout you will need in your app.