grid-template-areas Row/Column Counter

Count rows and columns in named grid-area row contents and validate uniform width and rectangular named areas.

Description

Named grid areas describe a grid through row strings, with repeated names forming areas and dot runs denoting empty cells.

Named grid areas describe a grid through row strings, with repeated names forming areas and dot runs denoting empty cells. Each named area must occupy one filled rectangle rather than an L-shape or disconnected cells.^[1]

Count rows and columns in named grid-area row contents and validate uniform width and rectangular named areas.

When to use grid-template-areas Row/Column Counter

Use this tool to count rows and columns in named grid-area row contents and validate uniform width and rectangular named areas.

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.

How to use grid-template-areas Row/Column Counter and understand its results

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
Enter rows using the field table and calculation rules, then run the tool.
Read rowCount, columnCount, areaNames. The explanation below defines the units, signs, ordering and any flags or placeholder values.
If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.

Input field	Meaning	Value type; see rules below	Requirement
rows	Grid area row contents	list of string; maximum length: 10000; minimum entries: 1; maximum entries: 1000	Required

Enter row contents without the surrounding CSS string quotes. The tokenizer recognizes names, runs of dots as one empty cell, and CSS whitespace. Each row must contain the same positive number of cells. The tool tracks each name's bounds and occurrence count, rejects nonrectangular areas, and returns rowCount, columnCount and names in first-appearance order.

rectangle check: occurrences of each name = height × width of its bounding box

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
rowCount	Row count	integer; minimum: 0; maximum: 9007199254740991
columnCount	Column count	integer; minimum: 0; maximum: 9007199254740991
areaNames	Named areas	list of string

json

{
  "input": {
    "rows": [
      "head head",
      "nav main"
    ]
  },
  "output": {
    "rowCount": 2,
    "columnCount": 2,
    "areaNames": [
      "head",
      "nav",
      "main"
    ]
  }
}

Limitations and assumptions

This is a restricted row-content parser, not a stylesheet parser. Escapes and surrounding quote syntax are not accepted; the accepted name characters are letters, digits, hyphen, underscore and non-ASCII UTF-16 units. It does not compute track sizes, place items or validate their grid-area declarations.

Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Cell-string lists also have a combined text budget of 100,000 UTF-16 units per list. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use Grid repeat() Count From Gap & Width: Calculate how many fixed-width grid tracks fit a definite container including gaps, and the CSS auto-repeat count of at least one; intrinsic sizing and flexible tracks are excluded. For a complementary task, use inset All-Four Offsets Shorthand: Expand one to four finite pixel inset values into top, right, bottom, and left offsets.

References

grid-template-areas Row/Column Counter — tool.io

Similar or alternative tools

Grid repeat() Count From Gap & Width
Calculate how many fixed-width grid tracks fit a definite container including gaps, and the CSS auto-repeat count of at least one; intrinsic sizing and flexible tracks are excluded.
inset All-Four Offsets Shorthand
Expand one to four finite pixel inset values into top, right, bottom, and left offsets.