CSS Grid

Grid-area property

The grid-area property is a shorthand property in CSS Grid Layout that allows you to specify where a grid item should be placed in a grid. It works by defining the starting and ending points of a grid item.

Uuseful for creating layouts with fewer lines of code, since it combines four separate properties: grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

4 Values

When using grid-area with 4 values, the syntax is:

grid-area: row-start / column-start / row-end / column-end;

Each value means:

• row-start: The grid line where the item starts in the row.
• column-start: The grid line where the item starts in the column.
• row-end: The grid line where the item ends in the row.
• column-end: The grid line where the item ends in the column.

Example: grid-area: 2 / 3 / 5 / 6; positions the item from row line 2, column line 3 to row line 5, column line 6.

3 Values

When using grid-area with 3 values, the syntax is:

grid-area: row-start / column-start / row-end;

When only three values are provided:

• row-start: The grid line where the item starts in the row.
• column-start: The grid line where the item starts in the column
• row-end: The grid line where the item ends in the row
• The column-end value is automatically set to auto.

Example: grid-area: 2 / 3 / 5; positions the item from row line 2, column line 3 to row line 5, and spans one column.

2 Values

When using grid-area with 2 values, the syntax is:

grid-area: row-start / column-start;

When only two values are provided:

• row-start: The grid line where the item starts in the row.
• column-start: The grid line where the item starts in the column.
• Both row-end and column-end values are set to auto.

Example: grid-area: 2 / 3; positions the item at row line 2, column line 3, spanning one row and one column.