Grid layout

Grid Layout: A Versatile Tool for UI Design

Introduction to Grid Layout

Grid layout is a universal auxiliary positioning tool that offers valuable insights for mobile interface design. Its main advantages include:

• Providing a Regular Structure: Grid layout offers a regular structure for layout, solving the problem of dynamic layout across multiple sizes and devices. By dividing the page into equal-width columns and rows, it facilitates the positioning and typesetting of page elements.
• Unified Positioning Standard: Grid layout provides a unified positioning standard for the system, ensuring the consistency of module layouts across different devices. This reduces the complexity of design and development, improving work efficiency.
• Flexible Spacing Adjustment: Grid layout offers a flexible method for adjusting spacing to meet the needs of special layout scenarios. By adjusting the spacing between columns and rows, the overall page typesetting effect can be controlled.
• Automatic Line Wrapping and Adaptability: Grid layout can automatically wrap and adapt to one-to-many layouts. When the number of page elements exceeds the capacity of a row or column, they will automatically move to the next row or column and adapt to different devices, making the page layout more flexible and adaptable.

GridRow and GridCol Components

GridRow is a grid container component that must be used in conjunction with the grid child component GridCol in grid layout scenarios.

Grid System Breakpoints

The grid system uses the device's horizontal width (screen density pixel value, in units of vp) as the breakpoint basis to define the width type of the device and form a set of breakpoint rules. Developers can implement different page layout effects in different breakpoint ranges according to their needs.

By default, the grid system divides device widths into four categories: xs, sm, md, and lg, with the following size ranges:

Breakpoint Name	Value Range (vp)	Device Description
xs	[0, 320)	Devices with the smallest width type.
sm	[320, 520)	Devices with a small width type.
md	[520, 840)	Devices with a medium width type.
lg	[840, +∞)	Devices with a large width type.

In the GridRow component, developers are allowed to use breakpoints to customize and modify the value ranges of breakpoints. Up to six breakpoints are supported, including the default four breakpoints and two additional breakpoints, xl and xxl, for a total of six different sizes (xs, sm, md, lg, xl, xxl) of device layout settings.

Breakpoint Name	Device Description
xs	Devices with the smallest width type.
sm	Devices with a small width type.
md	Devices with a medium width type.
lg	Devices with a large width type.
xl	Devices with an extra-large width type.
xxl	Devices with an ultra-large width type.

For breakpoint positions, developers can set them based on actual usage scenarios using a monotonically increasing array. Since breakpoints support up to six breakpoints, the maximum length of the monotonically increasing array is 5.

For example:

breakpoints: {value: ['100vp', '200vp']}

This indicates that three breakpoints (xs, sm, and md) are enabled. Devices with a width less than 100vp are categorized as xs, those with a width between 100vp and 200vp as sm, and those with a width greater than 200vp as md.

Another example:

breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}

This indicates that five breakpoints (xs, sm, md, lg, and xl) are enabled. Devices with a width less than 320vp are categorized as xs, those between 320vp and 520vp as sm, those between 520vp and 840vp as md, those between 840vp and 1080vp as lg, and those greater than 1080vp as xl.

The grid system listens for changes in window or container size to trigger breakpoints and uses the reference property to set the reference for breakpoint switching. Considering that applications may be displayed in non-full-screen windows, using the application window width as the reference is more universal.

For example, using the default 12 columns of the grid, the application width is divided into six intervals through breakpoint settings. In each interval, the number of columns occupied by each grid child element is different.

@State bgColors: ResourceColor[] =
    ['rgb(213,213,213)', 'rgb(150,150,150)', 'rgb(0,74,175)', 'rgb(39,135,217)', 'rgb(61,157,180)', 'rgb(23,169,141)',
      'rgb(255,192,0)', 'rgb(170,10,33)'];
// ...
GridRow({
  breakpoints: {
    value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
    reference: BreakpointsReference.WindowSize
  }
}) {
   ForEach(this.bgColors, (color:ResourceColor, index?:number|undefined) => {
     GridCol({
       span: {
         xs: 2, // On the smallest width type devices, the grid child component occupies 2 columns of the grid container.
         sm: 3, // On small width type devices, the grid child component occupies 3 columns of the grid container.
         md: 4, // On medium width type devices, the grid child component occupies 4 columns of the grid container.
         lg: 6, // On large width type devices, the grid child component occupies 6 columns of the grid container.
         xl: 8, // On extra-large width type devices, the grid child component occupies 8 columns of the grid container.
         xxl: 12 // On ultra-large width type devices, the grid child component occupies 12 columns of the grid container.
       }
     }) {
       Row() {
         Text(`${index}`)
       }.width("100%").height('50vp')
     }.backgroundColor(color)
   })
}