no-invalid-named-grid-areas.md

no-invalid-named-grid-areas

Disallow invalid named grid areas.

Background

CSS Grid allows you to define named grid areas using the grid-template-areas property. Each string in the value creates a row, and each cell token in the string creates a column. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells.

A named grid area is considered invalid if:

1. The strings in the value have different numbers of cell tokens
2. No cell tokens are present
3. Cell tokens with the same name do not form a rectangle

Rule Details

This rule prevents invalid named grid areas in CSS grid templates.

Examples of incorrect code:

/* eslint css/no-invalid-named-grid-areas: "error" */

.grid {
	grid-template-areas: "";
}

/* eslint css/no-invalid-named-grid-areas: "error" */

.grid {
	grid-template-areas:
		"header header header"
		"nav main main main";
}

/* eslint css/no-invalid-named-grid-areas: "error" */

.grid {
	grid-template-areas:
		"header header header"
		"nav main main"
		"nav . main";
}

Examples of correct code:

/* eslint css/no-invalid-named-grid-areas: "error" */

.grid {
	grid-template-areas:
		"header"
		"nav"
		"main";
}

/* eslint css/no-invalid-named-grid-areas: "error" */

.grid {
	grid-template-areas:
		"header header header"
		"nav main main"
		"nav main main";
}

/* eslint css/no-invalid-named-grid-areas: "error" */

.grid {
	grid-template-areas:
		"header header header"
		"nav . main"
		"nav . main";
}

When Not to Use It

If you aren't concerned with invalid grid area definitions, then you can safely disable this rule.

Prior Art

• named-grid-areas-no-invalid