Grid line
A grid line is a horizontal or vertical boundary in a CSS Grid layout that defines track edges and item placement positions.
CSS in Depth, Second Edition
A named grid line is a CSS Grid line assigned one or more author-defined names for referring to grid positions.
- How it is used
- Uses named grid lines to place items when numbered boundaries become difficult to track.
- How deep it goes
- Works through bracketed names, multiple names per line, repeated names, and placement with start and end boundaries.
- Examples
- Uses a two-column template and a page layout with named column boundaries and repeated row names.
- What you can do after
- Apply it via CSS Grid to name track boundaries and place items using those names.
Math for Web Design
A grid line is a CSS Grid line that defines a row or column boundary and provides a position for placing grid items.
- How it is used
- Positions grid items by naming the row and column boundaries they occupy.
- How deep it goes
- Explains line numbering, cells, spans, and negative indices, including the explicit-versus-implicit-track limitation.
- Examples
- Uses a 3-by-2 grid, a multi-cell item, a full-width title, and a last-row inventory total.
- What you can do after
- Apply it via CSS Grid properties to place, span, and end-anchor items in responsive layouts.
Related concepts
- grid-rowused by · The CSS grid-row shorthand property specifies the start and end grid lines defining a grid item's row placement.
- grid-columnused by · The CSS grid-column shorthand property specifies the start and end grid lines defining a grid item's column placement.
- cellused by · A cell is an individual addressable position or bounded region in an organized structure that stores or represents a value, state, or associated data.
- subgridused by · Subgrid is a CSS Grid feature that lets a nested grid use and align with its parent grid's tracks for rows, columns, or both.
- grid areaalternative to · A grid area is a rectangular region of one or more CSS Grid cells, optionally identified by a name for layout placement.
- explicit track creationuses · Explicit track creation is the definition of grid rows or columns directly by a grid declaration.
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.