What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you define rows and columns to position items precisely. Apply it with display: grid on a container. Define the grid structure with grid-template-columns and grid-template-rows: grid-template-columns: repeat(3, 1fr) creates three equal columns. The fr unit represents a fraction of available space. Items are placed automatically or explicitly with grid-column and grid-row. Use gap for spacing between cells. CSS Grid is ideal for full-page layouts, card grids, and any design requiring both row and column control simultaneously.