Skip to content
Biome 中文网
开发文档 当前版本 v1.9

noInvalidGridAreas

诊断类别：lint/correctness/noInvalidGridAreas

¥Diagnostic Category: lint/correctness/noInvalidGridAreas

自从：v1.9.9

¥Since: v1.9.9

来源：

¥Sources:

禁止在 CSS 网格布局中无效命名的网格区域。

¥Disallows invalid named grid areas in CSS Grid Layouts.

要使命名网格区域有效，所有字符串都必须定义：

¥For a named grid area to be valid, all strings must define:

  • 相同数量的单元格标记

    ¥the same number of cell tokens

  • 至少一个单元格标记

    ¥at least one cell token

并且所有跨越多个网格单元的命名网格区域都必须形成一个填充的矩形。

¥And all named grid areas that spans multiple grid cells must form a single filled-in rectangle.

示例

Section titled 示例

¥Examples

无效

Section titled 无效

¥Invalid

a { grid-template-areas: "a a"
                         "b b b"; }
code-block.css:1:26 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Inconsistent cell count in grid areas are not allowed.
  
  > 1 │ a { grid-template-areas: “a a”
      │                          ^^^^^
    2 │                          “b b b”; }
    3 │ 
  
  ℹ Consider adding the same number of cell tokens in each string.
  
a { grid-template-areas: "b b b"
                         ""; }
code-block.css:1:33 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Empty grid areas are not allowed.
  
  > 1 │ a { grid-template-areas: “b b b”
      │                                 
  > 2 │                          ""; }
      │                          ^^
    3 │ 
  
  ℹ Consider adding the cell token within string.
  
a { grid-template-areas: "a a a"
                         "b b a"; }
code-block.css:1:33 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate filled in rectangle are not allowed.
  
  > 1 │ a { grid-template-areas: “a a a”
      │                                 
  > 2 │                          “b b a”; }
      │                          ^^^^^^^
    3 │ 
  
  ℹ Consider removing the duplicated filled-in rectangle: a

有效

Section titled 有效

¥Valid

a { grid-template-areas: "a a a"
                         "b b b"; }
a { grid-template-areas: "a a a"
                         "a a a"; }

相关链接

Section titled 相关链接

¥Related links