NativeScript/tests/app/ui/layouts/grid-layout.md

nav-title	title	environment	description	previous_url
grid-layout How-To	grid-layout	nativescript	Examples for using grid-layout	/ApiReference/ui/layouts/grid-layout/HOW-TO

GridLayout

Using a GridLayout requires the GridLayout module. {%snippet grid-layout-require%}

Declaring a GridLayout

<GridLayout columns="80, *, auto" rows="auto, *" >
 <Button col="0" />
 <Button col="1" />
 <Button col="2" />
 // by default column and row are set to 0
 <Button row="1" colSpan="3" />
</GridLayout>

Add views to grid layout

{%snippet grid-layout-addviews%}

Set column property on views - btn1 in first column, btn2 is second and btn3 in third

{%snippet grid-layout-setcolumn%}

Set row property on btn4.

{%snippet grid-layout-setrow%}

Set columnSpan property on btn4 to stretch into all columns

{%snippet grid-layout-columnspan%}

Create ItemSpec for columns and rows 3 columns - 80px, *, auto size and 2 rows - 100px and auto size

{%snippet grid-layout-itemspec%}

Add columns and rows to GridLayout

{%snippet grid-layout-add-rowscols%}