Flexbox (Flexible Box Layout) is a one-dimensional layout model designed for distributing space and aligning items along a single direction, either a row or a column. It excels at centering elements both vertically and horizontally, building navigation bars, creating card layouts in a single row, and distributing space evenly among items. Flexbox is activated by setting `display: flex` on a parent container, after which a set of container properties controls the layout: `flex-direction` sets the main axis (row, column, row-reverse, or column-reverse), `justify-content` distributes items along that main axis with values like `flex-start`, `center`, `space-between`, `space-around`, and `space-evenly` (each producing slightly different edge-spacing behavior), `align-items` aligns items on the cross axis, `flex-wrap` controls whether items wrap onto multiple lines, and `gap` sets the spacing between items. Choosing the main axis correctly is the key to understanding Flexbox alignment, because `justify-content` always affects the main axis and `align-items` always affects the cross axis. A common centering pattern applies `display: flex`, `justify-content: center`, and `align-items: center` to a parent with a defined height (such as `min-height: 100vh`) to center any direct children both ways.
Flex items have their own set of properties that determine how they grow, shrink, and align within the container. The `flex` shorthand combines `flex-grow`, `flex-shrink`, and `flex-basis`, so `flex: 1` is equivalent to `flex: 1 1 0%` and makes all items share space equally, `flex: auto` is `1 1 auto` and starts from each item's content size, and `flex: none` is `0 0 auto` and keeps items at their natural size. The `align-self` property overrides `align-items` for a single item, and the `order` property changes the visual order of items, though the DOM source order is unchanged, so tab order and screen-reader reading still follow the source. The `align-content` property differs from `align-items` in that it distributes space between rows of wrapped flex items and only takes effect with `flex-wrap: wrap` and multiple lines.
CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously, making it ideal for full-page layouts, complex grid-based designs, and any situation requiring precise control over both axes. Grid is activated with `display: grid`, and its container properties include `grid-template-columns` and `grid-template-rows` for defining track sizes, `gap` for spacing between cells, `grid-template-areas` for naming regions, and `justify-items`/`align-items` for aligning items within their cells. The `place-items` shorthand combines `align-items` and `justify-items` (with `place-items: center` centering both ways), and `place-content` does the same for the container's `align-content` and `justify-content`. The `fr` unit represents a fraction of the available space, so `grid-template-columns: 1fr 2fr 1fr` creates three columns where the middle is twice as wide as the others, distributing leftover space after fixed and content-sized tracks are calculated. The `1fr` unit distributes remaining space after fixed and content-sized tracks, while `auto` sizes a track to fit its content; mixing them like `grid-template-columns: auto 1fr auto` builds flexible layouts where the middle expands.
Grid offers several tools for placing items efficiently. Line-based placement uses `grid-column: 1 / 3` to span from column line 1 to 3, while `grid-column: span 2` spans two columns from an auto-placed position for more flexible layouts. The `grid-area` shorthand accepts row-start, column-start, row-end, and column-end in one declaration, or a named region when used with `grid-template-areas`. The `repeat()` function provides a shorthand for repeating tracks, so `grid-template-columns: repeat(3, 1fr)` equals `1fr 1fr 1fr`. More powerfully, `repeat(auto-fill, minmax(250px, 1fr))` creates as many columns as fit at minimum 250 pixels each, while `repeat(auto-fit, minmax(250px, 1fr))` does the same but collapses empty tracks, both producing responsive grids without media queries. The `grid-auto-flow` property controls how unplaced items are inserted, with `row`, `column`, and `dense` (which backtracks to fill earlier gaps) as options. When items extend beyond the explicitly defined grid, the browser creates implicit tracks whose sizes are controlled by `grid-auto-columns` and `grid-auto-rows`. The `subgrid` value lets a nested grid inherit its track sizing from its parent's grid, keeping nested content aligned with siblings.