CSS Grid
CSS Grid is a two-dimensional layout system for coordinating rows and columns. It can define major page regions, editorial compositions and reusable components without the table hacks or float-based placement used by earlier web layouts.
Flexible track sizing
Grid tracks can use fixed units, percentages, intrinsic sizing keywords, minmax() and the fr unit.
An fr distributes a share of available free space after other sizing constraints are resolved. Patterns such as repeat(auto-fit,minmax(...)) can create responsive columns that add or remove tracks as room changes, often without a media query. minmax() is especially useful because it can protect a minimum readable width while allowing tracks to expand.
CSS Grid in images
Selected visual references help connect the article to surviving works, objects, places, documents or practical examples related to this subject.
Tracks, lines and cells
A grid container is created with display:grid or inline-grid. grid-template-columns and grid-template-rows define explicit tracks, and the lines around those tracks can be used to place items. Gaps add space between tracks without requiring margins on every child. Items can occupy one cell, span several tracks or overlap. This makes Grid fundamentally different from Flexbox, which distributes items along one primary axis at a time.
Explicit and implicit grids
Tracks declared in the template form the explicit grid. If auto-placement puts an item beyond those tracks, the browser creates implicit rows or columns, whose sizing can be controlled with grid-auto-rows or grid-auto-columns. Understanding this distinction prevents mysterious overflow when dynamic content creates more items than a mockup anticipated. A grid that depends on exactly six cards is brittle if a CMS later publishes seven.
Placement and source order
Grid allows line-based placement, named grid areas and automatic placement. Dense auto-placement can visually fill holes, but visual position does not rewrite DOM reading order. As with Flexbox, designers should not use Grid to create a visual sequence that contradicts the logical source sequence. Layering with z-index and overlapping grid items can create sophisticated editorial compositions while the document itself remains semantically ordered.
Subgrid and component relationships
Subgrid lets a nested grid participate in track sizing from its parent rather than inventing an unrelated internal grid. It is useful for repeated cards whose headings, body regions and actions need alignment across siblings, or for complex editorial structures. Grid remains strongest when the design problem is about shared two-dimensional relationships. Smaller one-axis groups inside the grid can still use Flexbox, normal flow or intrinsic layout rather than turning every container into another grid.
More context, examples and technical detail
This section moves beyond the introductory account into the material, historical and interpretive details that make CSS Grid worth studying in depth.
Grid brings two-dimensional layout into CSS
CSS Grid Layout lets authors define rows and columns together, place items into explicit tracks and allow the browser to create implicit tracks when necessary. fr units distribute leftover space, minmax() sets flexible limits, and repeat() can generate track patterns. Named grid lines and grid areas can make source code read more like a layout diagram than a collection of offsets.
Unlike older float or table hacks, Grid was designed specifically for page and component layout.
Explicit and implicit grids are different systems
Tracks declared with grid-template-columns or grid-template-rows belong to the explicit grid. Items placed outside that structure cause implicit tracks to be created, whose sizing is controlled by grid-auto-columns or grid-auto-rows. Auto-placement then fills available cells according to grid-auto-flow. Many unexpected layouts come from forgetting which tracks are explicit and which the browser generated automatically.
Grid and Flexbox are partners, not rivals
Grid is strongest when relationships must be coordinated across rows and columns, while Flexbox is often simpler when the main problem is distributing items along one dimension. Real interfaces commonly nest the two: a page shell may use Grid while each card uses Flexbox internally. Choosing based on layout logic produces more resilient CSS than treating one technology as the universal replacement for the other.
Explicit tracks, implicit tracks and genuine two-dimensional layout
CSS Grid creates rows and columns as a coordinated two-dimensional system. Authors can define explicit tracks with grid-template-columns and grid-template-rows, while the browser creates implicit tracks when items are placed outside that definition. Fractional units distribute remaining space, minmax() describes flexible constraints, repeat() reduces repetition and auto-placement can fill cells without manually positioning every item. Named grid lines and grid areas allow layouts to communicate structure in code. Unlike older float- or table-based hacks, Grid was designed specifically for page and component layout, making alignment across both axes a first-class browser capability.
A grid container is created with display:grid or inline-grid.
Tracks declared in the template form the explicit grid.
Grid allows line-based placement, named grid areas and automatic placement.
Subgrid lets a nested grid participate in track sizing from its parent rather than inventing an unrelated internal grid.
CSS Grid Layout lets authors define rows and columns together, place items into explicit tracks and allow the browser to create implicit tracks when necessary.
Tracks declared with grid-template-columns or grid-template-rows belong to the explicit grid.
Related topics in the Wemaxa Encyclopedia
