Two layout systems
Modern CSS offers two powerful layout tools, and they shine in different situations.
Flexbox
Flexbox lays out items along a single axis, either a row or a column. It excels at distributing space and aligning items in one direction.
- Great for navigation bars, toolbars, and centering.
- Items can grow and shrink to fill available space.
Grid
Grid lays out items in two dimensions at once, rows and columns together. You define a grid template and place items into it.
- Great for page layouts and card galleries.
- You control both axes and can overlap items.
Choosing
- One direction of content flow points to flexbox.
- A true two dimensional structure points to grid.
- They compose well: a grid cell can contain a flex container.
Key idea
Use flexbox for one dimensional alignment and grid for two dimensional structure, and combine them when needed.