Grid Shorthand Property
Last updated: 2026-09-13
grid Grid Shorthand Property
The grid property is the CSS Grid shorthand. In one declaration it sets the explicit tracks, the auto tracks and the auto-flow direction of a grid container. It is the sum of the grid-template and grid-auto series and the most complete grid shorthand when you want to describe the whole grid structure.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid: <grid-template> | <grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ]?;⚙️ Values
| Value | Type | Description |
|---|---|---|
<grid-template> | Type | Explicit grid shorthand |
<grid-template-rows> / [ <grid-auto-flow>? <grid-auto-columns>? ] | Value | Rows/columns shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： In the grid shorthand, the tracks before the slash / are the rows and the tracks after it are the columns, matching the grid-template writing order.
Warning： The grid shorthand resets every grid property that is not explicitly declared, such as grid-auto-flow. Keep this reset scope in mind when using it.
❓ FAQ
QWhat is the difference between grid and grid-template?
Agrid is the more sweeping shorthand: it resets the explicit tracks, the implicit tracks and the auto-placement direction in one go, which is useful for a clean grid initialization. grid-template only sets the explicit tracks (rows, columns, areas) and leaves the grid-auto-* properties untouched, so it has fewer side effects and is better when you only need to adjust the explicit structure.
QWhen should I use the grid shorthand?
AUse the grid shorthand when you need to define the whole grid structure at once, or when you want to reset all grid-related properties. If you only want to change one part, such as the column width, use a single property like grid-template-columns instead, so the shorthand cannot accidentally reset other grid settings. Pick one style for your team and stick to it, because mixing styles leads to hidden resets.
QHow does grid: 200px 1fr / 1fr 2fr map to rows and columns?
AIn the grid shorthand, the left side of the slash is grid-template-rows (rows) and the right side is grid-template-columns (columns). So grid: 200px 1fr / 1fr 2fr defines two rows (200px and 1fr) and two columns (1fr and 2fr). Remember “rows first, columns second” - it is the opposite of the columns-only intuition - and verify the result in a browser.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Column Tracks
Defines the structure of grid columns
Grid Auto Flow
Controls the direction in which grid items are placed automatically
