Lines Matching refs:grid

6 The grid layout consists of cells formed by rows and columns. You can specify the cells where items…
8 …grid.md) and [GridItem](../reference/apis-arkui/arkui-ts/ts-container-griditem.md) components for …
23 …grid layout is a two-dimensional layout. The **Grid** component allows you to define the number of…
37 …mns is determined by the layout direction and the width and height of the grid. Elements that exce…
45 …tion of rows and columns to determine the overall arrangement mode of the grid layout. To do so, u…
47 … or columns in the grid layout, and the number in front of **fr** is used to calculate the proport…
53 The preceding figure shows a grid layout with three rows and three columns. The grid layout is divi…
68 …ttributes, see [Grid Attributes](../reference/apis-arkui/arkui-ts/ts-container-grid.md#attributes).
73 …grid layout, where grid cells span a varying number of cells and rows, is as common as its even co…
75 **Figure 4** Uneven grid layout
79 …grid layout is the calculator. As shown in the following figure, the **0** key spans the first and…
85 In the grid, use the **onGetRectByIndex** callback to return the array [rowStart, columnStart, rowS…
114 …grid layout, you can use the **layoutDirection** attribute to set the main axis direction and ther…
120 …xCount** attribute is set to **3**, indicating that the maximum number of grid cells displayed alo…
134 >- When only **rowsTemplate** is set, the main axis of the grid runs in the horizontal direction, a…
135 >- When only **columnsTemplate** is set, the main axis of the grid runs in the vertical direction, …
140 The grid layout organizes its internal elements in two-dimensional layout mode, as shown in the fol…
203 The horizontal spacing between two grid cells is called row spacing, and the vertical spacing is ca…
209 You can use **rowsGap** and **columnsGap** to set the row spacing and column spacing of the grid la…
223 …grid layout is often used on the file list, product list, video list, and similar pages, as shown …
225 **Figure 9** Horizontal scrollable grid layout
229 If **columnsTemplate** is set, the grid scrolls vertically. If **rowsTemplate** is set, the grid sc…
231 …grid layout shown in the preceding figure, **rowsTemplate** is set but **columnsTemplate** is not.…
249 …Template attribute. When the content exceeds the display area of the grid, the grid can be scrolle…
259 …the feature of controlling the scrolling position is commonly used in the grid layout, for example…
302 …ing-a-long-list), it is also recommended for a scrolling grid layout when a large number of grid i…
306 …grid is rendered in lazy loading mode, to improve the grid scrolling experience and minimize white…
308 …Specifically, the number of the grid items to cache before and after the currently displayed one e…