What is CSS Grid?
The short answer
CSS Grid is a two-dimensional layout system that places elements into rows and columns at once, making complex page layouts possible with a few lines of CSS.
CSS Grid, explained
Grid handles whole-page structure and card layouts; Flexbox handles one direction at a time. Most modern layouts use both.
Questions people ask about CSS Grid
What is CSS Grid?
CSS Grid is a two-dimensional layout system that places elements into rows and columns at once, making complex page layouts possible with a few lines of CSS.
Related terms
Flexbox is a one-dimensional CSS layout system for arranging items in a row or column, with easy alignment, spacing and wrapping.
Grid layoutA layout grid is the invisible system of columns and gutters that aligns everything on a page, giving a design order and rhythm.
Bento gridA bento grid is a layout of rounded tiles in different sizes, like a bento lunch box, used to present several features or facts in one scannable block.
DOMThe DOM is the browser's live, tree-shaped model of a web page; JavaScript reads and changes the DOM to update what visitors see.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.