@cross-device-app-dev/grid-columns-span

Setting only the span attribute for all GridCol child components in the responsive grid, with the value equal to the parent component's columns attribute, is not recommended. This is equivalent to the child components always having a width of 100% of the parent container, rendering the responsive grid system ineffective, unnecessarily increasing the complexity of the page's component tree, and affecting performance.

Rule Configuration

// code-linter.json5
{
  "rules": {
    "@cross-device-app-dev/grid-columns-span": "warn"
  }
}

Options

This rule is not configurable.

Example of Correct Code

@Entry
@Component
struct Index {
  build() {
    Column() {
      GridRow({
        columns: { sm: 4, md: 8, lg: 12 }
      }) {
        GridCol({
          span: { sm: 4, md: 4, lg: 4 }, offset: { sm: 0, md: 2, lg: 4 }
        }) {
          Row().backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
        }
      }
    }
  }
}

Example of Incorrect Code

@Entry
@Component
struct Index {
  build() {
    Column() {
      GridRow({
        columns: { sm: 4, md: 8, lg: 12 }
      }) {
        GridCol({
          span: { sm: 4, md: 8, lg: 12 }
        }) {
          Row().backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
        }
      }
    }
  }
}

Rule Set

plugin:@cross-device-app-dev/recommended
plugin:@cross-device-app-dev/all