CSSgrid

CSSgrid, short for CSS Grid Layout, is a CSS layout system that enables two-dimensional grid-based arrangements of content. It introduces a grid container whose children act as grid items, allowing developers to define rows and columns and place items precisely within the grid.

The core concepts include explicit grids, implicit grids, and grid tracks. A grid container is created by setting display: grid or display: inline-grid. Columns and rows are defined with grid-template-columns and grid-template-rows, using values such as lengths, fr units, or minmax. Gap controls (gap, row-gap, column-gap) specify spacing between tracks, while grid-auto-flow determines automatic placement direction.

Item placement can be controlled with grid-column and grid-row properties, or by naming areas with grid-template-areas. The framework supports named grid lines and the grid-area property for two-dimensional positioning. Features such as auto-fill/auto-fit, the repeat() function, and the subgrid concept enable responsive layouts and consistent sizing across different viewports.

CSSgrid provides a robust, standards-based approach to layout that complements flexbox for one-dimensional layouts. It is widely supported in modern browsers, with vendor prefixes largely unnecessary. Older browsers such as Internet Explorer 11 offer partial support, limiting some features. As a result, CSSgrid is commonly used for complex page structures and responsive designs.