Skip to content

Commit 4551eb8

Browse files
authored
Merge pull request #377 from NativeScript/niliev/grid
docs: grid layout using relative percentage explanation
2 parents 9964f16 + 4d5707c commit 4551eb8

File tree

1 file changed

+4
-1
lines changed
  • app/ng-ui-widgets-category/layouts/grid-layout

1 file changed

+4
-1
lines changed

app/ng-ui-widgets-category/layouts/grid-layout/article.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
The GridLayout is a layout that arranges its child elements in a table structure of rows and columns. A cell can contain multiple child elements. Each one can span over multiple rows and columns, and even overlap the others. The GridLayout has one column and one row by default. To add additional columns and rows, you have to specify column definition items (separated by commas) to the columns property and row definition items (separated by commas) to the rows property of the GridLayout. The width of a column and the height of a row can be specified as an absolute amount of pixels, as a percentage of the available space or automatically.
1+
The GridLayout is a layout that arranges its child elements in a table structure of rows and columns. A cell can contain multiple child elements. Each one can span over multiple rows and columns, and even overlap the others. The GridLayout has one column and one row by default. To add additional columns and rows, you have to specify column definition items (separated by commas) to the columns property and row definition items (separated by commas) to the rows property of the GridLayout. The width of a column and the height of a row can be specified as an absolute amount of pixels, or automatically and by using the start sign (*) for relative percentages.
2+
3+
> **Note:** While percentage values are **not** supported for creating rows and columns, you can use the start sign (**`*`**) to take space based on relative percentage.
4+
For example, let's assume that we have the following setup `rows="*, 2*, 2*"`. The GridLayout will take all the available space (meaning the space given by its parent or the space set via the `height` property), will create three rows and will divide the space to 5 equal parts (as we have a total of `5*`). The first row will take one part (`*`), while the second and the third rows will take two parts (`2*`) meaning they will be twice as big compared to the first row. The setup would be equal to setting `20%, 40%, 40%`.
25

36
**API Reference for** [GridLayout Class](http://docs.nativescript.org/api-reference/modules/_ui_layouts_grid_layout_.html)
47

0 commit comments

Comments
 (0)