Grid-column
The CSS grid-column shorthand property specifies the start and end grid lines defining a grid item's column placement.
CSS in Depth, Second Edition
The CSS grid-column shorthand property specifies the start and end grid lines that define an item's column placement.
- How it is used
- Places grid items across specified vertical grid lines within two-dimensional CSS Grid layouts.
- How deep it goes
- Explains shorthand values, numbered and named lines, spans, and interaction with automatic placement.
- Examples
- Uses main content, stacked sidebar tiles, full-width headers, named-line layouts, and responsive card grids.
- What you can do after
- Build it from scratch by assigning grid items to numbered or named columns and controlling their spans.
Read how CSS in Depth, Second Edition explains grid-column →
Math for Web Design
grid-column is a CSS property that specifies the grid-column lines between which a grid item is placed or spanned.
- How it is used
- Places grid items precisely between vertical lines and spans responsive layouts across changing column counts.
- How deep it goes
- Explains line coordinates, shorthand, spanning, negative indexing, and implicit tracks, while deferring detailed track-size calculations.
- Examples
- Uses single-cell placement, multi-column spans, full-width title rows, responsive negative lines, DevTools overlays, and implicit columns.
- What you can do after
- Apply it via CSS to place, span, and inspect grid items in fixed or dynamically sized layouts.
Related concepts
- grid lineuses · A grid line is a horizontal or vertical boundary in a CSS Grid layout that defines track edges and item placement positions.
- implicit gridconfigures · An implicit grid is the set of CSS Grid tracks automatically created beyond those explicitly defined to place grid items.
- grid areauses · A grid area is a rectangular region of one or more CSS Grid cells, optionally identified by a name for layout placement.
- gridpart of · A grid is a regular arrangement of positions or cells organized by rows and columns or by fixed neighboring relationships.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.