Grid
A grid is a regular arrangement of positions or cells organized by rows and columns or by fixed neighboring relationships.
CSS in Depth, Second Edition
A CSS layout system that arranges elements in rows and columns using a two-dimensional grid.
- How it is used
- Builds two-dimensional page and card layouts whose items align across rows and columns.
- How deep it goes
- Works through containers, tracks, cells, spanning, and responsive sizing; also identifies numbered lines, named lines, named areas, and implicit placement.
- Examples
- Uses six boxes, a page with spanning regions and sidebars, and cards that change from stacked blocks to responsive columns.
- What you can do after
- Build it from scratch: define grid tracks and gaps, place page regions, and adapt columns to available width.
Geometry for Programmers
A grid is a regularly spaced arrangement of cells or sample points used to organize geometric or numerical data.
- How it is used
- Uses grids to sample surfaces and to locate contours in signed-distance fields and thresholded images.
- How deep it goes
- Develops coordinate-array construction and three-step contour refinement, while treating triangulation and later smoothing as separate work.
- Examples
- Demonstrates UV samples for a polynomial mushroom, SDF cell contours, and threshold borders between neighboring image pixels.
- What you can do after
- Build it from scratch as sampled coordinate arrays or use it to form an initial contour from neighboring scalar values.
Advanced Algorithms and Data Structures
A regular grid is a spatial partition that divides a region into equal-sized, regularly arranged cells.
- How it is used
- Partitions coordinate space for nearby-point search and MapReduce DBSCAN sharding.
- How deep it goes
- Works through coordinate-based tile lookup and ε-overlapping shards, but does not provide a full grid-sharding implementation.
- Examples
- Illustrates empty and crowded map tiles, ε-expanded adjacent cells, and a four-cell mapper-and-reducer arrangement.
- What you can do after
- Evaluate/understand it by weighing simple cell lookup against uneven occupancy and duplicated work at shard borders.
Read how Advanced Algorithms and Data Structures explains grid →
Grokking Algorithms, Second Edition
A tabular arrangement of cells that stores computed values for different knapsack capacities.
- How it is used
- Organizes knapsack subproblems by available items and capacity so smaller answers can build toward the full answer.
- How deep it goes
- Walks through an empty grid and its first item row, then shows why smaller weight increments require different columns.
- Examples
- Uses a 1 lb guitar worth $1,500, a 0.5 lb necklace, and a grid comparing misspelled words.
- What you can do after
- Build it from scratch by assigning knapsack items to rows, capacities to columns, and values to the first item row.
Read how Grokking Algorithms, Second Edition explains grid →
Deep Learning with Python, Third Edition
- How it is used
- Uses image cells to assign responsibility for bounding-box and class predictions in single-stage object detection.
- How deep it goes
- Defines cell responsibility, coordinate conversion, target arrays, and prediction shapes, but defers robust overlapping-box handling.
- Examples
- Demonstrates a 6 × 6 YOLO grid, coordinate conversion utilities, target arrays, and decoded prediction visualizations.
- What you can do after
- Build it from scratch by encoding boxes into grid targets and decoding cell predictions into image-relative boxes.
Read how Deep Learning with Python, Third Edition explains grid →
Tiny CSS Projects
A grid is a network of intersecting lines that divides space into rectangular or square cells.
- How it is used
- Structures web-page layouts with columns and rows, replacing layout tables while supporting adaptable designs.
- How deep it goes
- Demonstrates grid placement, row sizing, remaining-space distribution, and alignment through concrete CSS declarations.
- Examples
- Uses a Shakespeare sonnet page and summary cards to demonstrate page arrangement and aligned card content.
- What you can do after
- Apply it via CSS to arrange page regions and control how card content occupies available space.
Fabulous Adventures in Data Structures and Algorithms
A grid is a regular two-dimensional arrangement of positions or cells addressed by spatial coordinates.
- How it is used
- Models spatially organized states and local interactions in a changing two-dimensional world.
- How deep it goes
- Defines cells, coordinates, states, neighbors, and ticks, then demonstrates recurring patterns without detailing implementation.
- Examples
- Uses death from loneliness, still lifes, the blinker, and the glider as concrete grid patterns.
- What you can do after
- Evaluate how local neighbor counts produce stable, oscillating, moving, or disappearing patterns.
Read how Fabulous Adventures in Data Structures and Algorithms explains grid →
Math for Web Design
A regular system of intersecting rows and columns used to organize visual elements in a layout.
- How it is used
- Uses grids to align visual elements, calculate spacing, and structure responsive layouts.
- How deep it goes
- Calculates fractional track sizes after subtracting fixed tracks, gaps, borders, and padding.
- Examples
- Demonstrates an 800px CSS Grid container with fixed tracks, fractional tracks, gaps, borders, and padding.
- What you can do after
- Apply it via CSS Grid by calculating fractional columns from the container's true available space.
Related concepts
- rowhas part · A row is a horizontal subdivision of a layout or grid containing one or more cells, tracks, or content regions.
- 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.
- flexboxcontrasts with · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- float propertyalternative to · The CSS float property positions an element toward one side of its containing block and allows surrounding content to flow around it.
- columnhas part · A column is a vertical sequence or field in a tabular, grid, or matrix structure whose elements share a common position, attribute, or role.
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.