CSS grid Property

The grid property is a shorthand that lets authors configure an element as a grid container and set a number of its core layout characteristics in a single declaration. By combining several longhand properties (for example grid-template-columns, grid-template-rows and grid-template-areas) it defines the explicit grid — the named lines, tracks, and areas that items can be placed into — so you can express both the structure and initial placement intent without repeating multiple declarations. Using the shorthand changes the relationship between the container and its children: it creates the grid coordinate system that grid items use for sizing and placement.

Beyond the explicit grid, the grid shorthand also interacts with the creation of implicit tracks and the flow of items when there are more items than explicit slots. It influences how the auto-placement algorithm operates when items are not manually positioned (see grid-auto-flow) and how new tracks are generated when content overflows the explicit grid. This behavior is important for responsive and dynamic layouts because the shorthand can either fully specify the grid you want or leave certain aspects to be inferred, which affects both the visual result and how content reflows as the container changes size.

Spacing and alignment inside the grid are commonly coordinated with the grid definition made by the shorthand. The shorthand can be used in combination with gap-related settings to manage gutters between tracks (for example gap), and alignment properties control how items and the grid as a whole are positioned inside available space — properties such as align-items and justify-items determine how contents of each grid cell are placed, while container-level alignment can be further tuned by other alignment properties.

In practice, the power of grid is in its ability to reduce repetition and express complex two-dimensional layouts cleanly; however, it also has a precedence behavior to be aware of: using the shorthand will reset and overwrite corresponding longhand properties on the same element. Because it defines the container-level grid, it should be used together with a grid-creating declaration such as display (i.e., making the element a grid container) and with item-level positioning when you need explicit control over individual children. Understanding that distinction—container definition versus item placement—helps you combine the shorthand with longhands and item properties to build robust, maintainable grid layouts.