75. Grid Shorthands

Grid has several powerful shorthands to consolidate template and placement properties into single, readable lines.

1. grid-area (Placement Shorthand)

When placing an item by line numbers, grid-area can combine all four placement properties (row-start, column-start, row-end, column-end).

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

css .item-a { /* Starts at row line 2, column line 3, ends at row line 4, column line 4 */ grid-area: 2 / 3 / 4 / 4; }

2. The grid Shorthand (Template Definition)

The main grid property allows you to define both rows and columns, optionally including the areas, in a highly concise format. This is complex but extremely powerful for defining full layouts.

grid: <grid-template-rows> / <grid-template-columns>;

Example with Areas and Sizes

css .full-layout { display: grid; /* Define rows first, then / separator, then columns / grid: / Row definitions / [r1-start] "header header header" 50px [r1-end] [r2-start] "nav main aside" auto [r2-end] [r3-start] "footer footer footer" 30px [r3-end] / / Column definitions */ [c1] 1fr [c2] 2fr [c3] 1fr [c4]; }

Note: While grid is powerful, beginners often start with the longhand properties (grid-template-columns, grid-template-areas) for better clarity.