CSS Grid is a two-dimensional layout system that enables developers to create complex layouts on the web. Unlike Flexbox, which is one-dimensional, Grid allows you to work with both rows and columns, making it ideal for grid-based designs.
- Grid Container: The element on which
display: grid is applied. It becomes the parent of grid items. - Grid Item: Direct children of the grid container.
- Grid Lines: Horizontal and vertical lines that divide the grid.
- Grid Track: The space between two grid lines, equivalent to rows or columns.
- Grid Cell: The smallest unit of a grid, the intersection of a row and a column.
- Grid Area: A rectangular area defined by four grid lines.