Two-dimensional arrangement.
WHAT IT DOES
Arranges items in rows and columns simultaneously.
WHAT IT SUITS
Page layouts Card arrangements Anything requiring alignment in both directions
WHAT TO DEFINE
The columns and rows The gaps How items are placed
WHAT MAKES IT POWERFUL
Items can be placed explicitly, spanning rows or columns.
WHAT AUTOMATIC PLACEMENT PROVIDES
Items flowing into the grid without being individually positioned.
WHAT RESPONSIVE GRIDS ACHIEVE
Columns adjusting to available space, without breakpoints.
HOW
Defining a minimum item width and allowing the number of columns to vary.
WHY THAT MATTERS
It adapts continuously, rather than at fixed thresholds.
WHEN TO USE GRID RATHER THAN FLEXBOX
When you need alignment in both directions When the layout is defined by the container rather than the content
WHEN TO USE FLEXBOX
When items flow in one direction and size themselves.
WHAT TO USE TOGETHER
Both. Grid for the page structure, flexbox within components.
WHAT TO CHECK
Behaviour at every width, not only at breakpoints.
