gridcontainer

A grid container is an element whose display property is set to grid or inline-grid in CSS Grid Layout. It establishes a grid formatting context for its direct children, which are the grid items. The container defines the grid's structure in terms of columns and rows and governs how items are placed and sized within the grid.

Core concepts include grid tracks, grid lines, and grid areas. Columns are defined by grid-template-columns and rows by grid-template-rows. Implicit tracks may be created as items are placed, controlled by grid-auto-rows, grid-auto-columns, and grid-auto-flow. The auto-placement algorithm determines where items go unless explicit placement is provided.

Items can be positioned using line-based placement (grid-column and grid-row), by spanning multiple lines, or by assigning named grid areas with grid-template-areas and the grid-area property. The grid container also supports gaps between tracks via gap (previously row-gap and column-gap) and alignment of items within cells or across the grid using justify-items, align-items, justify-content, and align-content.

Sizing in a grid often uses track sizing functions such as fr units, minmax(), and max-content; the subgrid feature allows a grid item to share the parent grid's column or row lines in supported browsers.

Browser support is broad across modern engines, with full capabilities available in stable implementations. Grid containers are favored for complex, responsive layouts due to their explicit control over placement and spacing, while remaining flexible for dynamic content.