What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that enables complex page layouts previously impossible or requiring hacks. Unlike Flexbox (one-dimensional), Grid works on both the row and column axes simultaneously.

Core Concepts

• Grid container: Element with display: grid
• Grid tracks: Rows and columns
• Grid lines: Dividing lines (numbered from 1)
• Grid cells: Intersection of row and column
• Grid areas: Named regions of the grid

Essential Properties

• grid-template-columns — Define column sizes
• grid-template-rows — Define row sizes
• grid-column — Item column span
• grid-row — Item row span
• gap — Space between tracks