What is CSS Grid and how does it differ from Flexbox?

Question

Accepted Answer

CSS Grid is a two-dimensional layout system: you define rows and columns up front and drop elements into the resulting cells — whereas Flexbox handles only one direction at a time.
Grid works with a parent element in which you define a grid (a set of rows and columns), plus child elements that get placed into that grid. The headline difference from Flexbox is dimensionality:

Feature
Flexbox
CSS Grid

Dimensions
1D — a row or a column
2D — rows and columns together

Best for
Components: navbars, button rows
Page-level structure, complex layouts

Sizing driven by
Content of the items
The grid cells you define

.container {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

The rule of thumb: Flexbox for arranging things along one line; Grid for laying out a true 2D structure. They aren't rivals — a common pattern is Grid for the overall page skeleton and Flexbox inside each grid cell.
Go deeper:

CSS-Tricks — A Complete Guide to Grid — the canonical visual reference for every grid property and term.
 Wikipedia — CSS Grid Layout — background and the "holy grail" layout the model makes easy.

Feature	Flexbox	CSS Grid
Dimensions	1D — a row or a column	2D — rows and columns together
Best for	Components: navbars, button rows	Page-level structure, complex layouts
Sizing driven by	Content of the items	The grid cells you define