CSS Grid
CSS Grid is a two-dimensional browser layout system for rows and columns. It lets authors define explicit tracks, place items against grid lines or named areas, and allow additional implicit tracks to be generated when content exceeds the explicit grid.
- two-dimensional row + column control
- explicit and implicit tracks
- grid lines and named areas
- auto-placement
- track sizing with fr, minmax(), auto and intrinsic sizes
What makes it distinct
Grid made complex page composition possible without floats, table hacks or heavy positioning. Its design value is not “make boxes”; it is expressing real spatial relationships directly in code.
What physically or technically produces it
These properties and browser primitives are the actual working vocabulary. Changing track sizing, container scope, state or fallback strategy changes behavior without changing the underlying content.
Names, works and concepts worth connecting
From setup to finished result
Layout under changing space
Resize the component. The purpose of modern CSS layout is to preserve relationships as available space changes, not to freeze one screenshot.
What changed because of it
CSS Grid is a two-dimensional browser layout system for rows and columns. It lets authors define explicit tracks, place items against grid lines or named areas, and allow additional implicit tracks to be generated when content exceeds the explicit grid.
Grid made complex page composition possible without floats, table hacks or heavy positioning. Its design value is not “make boxes”; it is expressing real spatial relationships directly in code.
CSS Grid in its actual setting
CSS Grid is a two-dimensional browser layout system for rows and columns. It lets authors define explicit tracks, place items against grid lines or named areas, and allow additional implicit tracks to be generated when content exceeds the explicit grid.
The relevant context is standardized for modern browsers in the late 2010s and now a core CSS layout primitive. Within that setting, the most useful features to compare are two-dimensional row + column control, explicit and implicit tracks, grid lines and named areas, auto-placement and track sizing with fr, minmax(), auto and intrinsic sizes. Those characteristics are concrete enough to test against real examples, which is more useful than reducing the subject to a vague mood or a generic set of design words.
What was made, and how
The working vocabulary includes display: grid, grid-template-columns / rows, gap, grid-column / grid-row, grid-template-areas and fr and minmax(). These materials and tools matter because they constrain the kinds of edges, surfaces, joints, color, scale or repetition that can be produced. The page’s process sequence is define grid container, declare primary tracks, choose gaps, place priority items, allow / control auto-placement and add responsive track changes.
Reading the process in order helps separate technique from appearance. A feature that comes directly from the material should not be described as if it were arbitrary ornament, and an intentional formal decision should not be dismissed as an accident of the tool.
What to look at next
Useful anchors include CSS Grid Layout Module, explicit grid, implicit grid, grid auto-placement algorithm and subgrid as a related feature. They give the subject names, works, schools, systems or implementations that can be checked independently. Comparing several anchors matters because one famous object rarely represents every phase or regional version of a movement, technique or tool.
CSS Grid is a two-dimensional browser layout system for rows and columns. It lets authors define explicit tracks, place items against grid lines or named areas, and allow additional implicit tracks to be generated when content exceeds the explicit grid.
A browser-native version of the underlying rule
The goal is not to imitate the historical surface. The code carries one useful relationship, line density, proportional tracks, local responsiveness or reusable tokens, into a modern interface.
.layout {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .7fr);
gap: clamp(1rem, 3vw, 3rem);
}
.item--wide { grid-column: 1 / -1; }01 Compare examples
Compare several examples rather than one famous image or screenshot. Look for which features stay stable and which respond to scale, material, content, patron, manufacturer or implementation context.
02 Production and reproduction
The subject changes as it moves between original object, print, photograph, scan and browser. Scale, crop, color, texture and interaction can all shift, so reproduction should be treated as another design stage.
03 Wemaxa design bridge
Grid made complex page composition possible without floats, table hacks or heavy positioning. Its design value is not “make boxes”; it is expressing real spatial relationships directly in code.
For Wemaxa, that principle becomes a responsive system of typography, layout, components, motion and states that still works when real content replaces the mockup.
CSS Grid: the principle worth carrying forward
Grid made complex page composition possible without floats, table hacks or heavy positioning. Its design value is not “make boxes”; it is expressing real spatial relationships directly in code.
Rows, columns and grid tracks
A CSS Grid container establishes a two-dimensional layout made from rows and columns. The spaces between adjacent grid lines are called tracks. Authors can define those tracks with fixed lengths, percentages, intrinsic sizing keywords, flexible `fr` units, or functions such as `minmax()` and `repeat()`. Because both axes are controlled by the same layout model, Grid can coordinate alignments that would be awkward to reproduce with one-dimensional techniques.
The explicit grid is the set of tracks declared by properties such as `grid-template-columns` and `grid-template-rows`. If content is placed outside those tracks or auto-placement needs additional space, the browser creates implicit tracks. Their size can be influenced with `grid-auto-rows` and `grid-auto-columns`.
Lines, areas and auto-placement
Grid items can be positioned by numbered grid lines, named lines, or named grid areas. An author might create areas called `header`, `nav`, `main` and `aside`, then assign elements to those regions. For repeated content, explicit coordinates are often unnecessary because the grid auto-placement algorithm can place items into available cells according to `grid-auto-flow`.
Explicit placement and automatic placement are designed to work together. A lead story can span several tracks while ordinary story cards fill the remaining cells automatically. This makes Grid useful for editorial pages, dashboards, galleries and component layouts where some elements need emphasis but the total number of items can change.
fr, minmax() and intrinsic size
The `fr` unit represents a fraction of the leftover space in the grid container after non-flexible track sizes and gaps have been accounted for. A declaration such as `grid-template-columns: 2fr 1fr` creates a proportional relationship, while `minmax(15rem, 1fr)` gives a track a minimum size and lets it grow flexibly.
Intrinsic sizing keywords such as `min-content` and `max-content` let the content itself influence the track size. These tools are especially useful when a layout must accommodate unpredictable text lengths rather than fixed mockup dimensions. Functions such as `repeat(auto-fit, minmax(...))` can create responsive card grids that change column count as space becomes available.
Grid and Flexbox solve different problems
Grid and Flexbox overlap in capability, but their underlying models are different. Flexbox lays items out primarily along one axis at a time and is excellent for distributing items within a row or column. Grid establishes rows and columns together and is better when relationships across both axes matter.
Real interfaces commonly use both. A page shell might use Grid for large regions, while the navigation inside one region uses Flexbox. Choosing between them is less about which feature is newer and more about whether the layout problem is fundamentally one-dimensional or two-dimensional.