The grid-column property is the shorthand used on a grid item to control its horizontal placement within a grid container. It specifies the grid lines (or line names) that the item should start and end at on the column axis, which determines which columns the item occupies and how many columns it spans. While it changes an item’s position and the set of tracks the item covers, it does not itself define the sizes of those tracks — it only chooses which tracks are used.

Conceptually, grid-column maps directly to independent start and end placement properties: grid-column-start and grid-column-end. Those underlying properties represent the specific grid lines used for the leading and trailing edges of the item; the shorthand simply provides a compact way to set both in one declaration. Because it controls both sides of the occupied area, changing the shorthand can move an item, change how many columns it spans, or create overlaps with other items depending on other placement rules.

Placement set by grid-column interacts with how the grid is defined and how the automatic placement algorithm runs. The explicit column structure comes from grid-template-columns, and if placement refers to tracks outside that explicit grid, implicit tracks may be created whose sizing is governed by grid-auto-columns. If an item has no explicit column placement, the grid’s auto-placement behavior (grid-auto-flow) determines where it ends up. Note that alignment properties such as justify-self affect how the item’s content is positioned inside the area determined by grid-column, but they do not change which columns the item occupies.

Finally, when using named lines or allowing items to span multiple columns, grid-column is a key tool for creating complex layouts and intentional overlaps; changes to it will typically trigger layout reflow because they alter which tracks are occupied. It is used on grid items (children of the grid container) and is central to combining explicit placement with the grid’s track definitions and auto-placement behavior to achieve the desired horizontal layout.