Code & computing / QUICK REFERENCE

CSS Flexbox & Grid

Choose one-dimensional or two-dimensional layout patterns and keep responsive content from overflowing.

32 entries

Flex containers

Create a flex container: display: flex;
Direct children become flex items. [1]
Choose row direction: flex-direction: row;
Main axis follows the inline direction. [1]
Choose column direction: flex-direction: column;
Main axis follows the block direction. [1]
Allow wrapping: flex-wrap: wrap;
Items can form multiple flex lines. [1]
Gap between items: gap: 1rem;
Adds gutters without outer edge margins. [1]
Center on main axis: justify-content: center;
Requires spare main-axis space for visible movement. [1]
Space between items: justify-content: space-between;
Distributes remaining space between items. [1]
Center on cross axis: align-items: center;
Applies to the cross axis of each flex line. [1]

Flexible equal basis: flex: 1 1 0;
Items share available main-axis space from a zero basis. [1]
Fixed preferred basis: flex: 0 0 18rem;
Does not grow or shrink from that basis. [1]
Grow when space remains: flex-grow: 1;
Shares positive remaining space with other growing items. [1]
Permit shrinking: flex-shrink: 1;
Negative space is distributed using the flex sizing rules. [1]
Let long content shrink: min-width: 0;
Often needed on horizontal flex/grid items with long contents. [1]
Override one item's alignment: align-self: flex-start;
Overrides align-items for this item. [1]
Push an item to the far edge: margin-inline-start: auto;
Absorbs available inline-axis space in a suitable row layout. [1]
Visual ordering: order: 1;
Changes visual layout, not logical reading/tab order. [1]

Create a grid container: display: grid;
Direct children become grid items. [2]
Two equal columns: grid-template-columns: repeat(2, minmax(0, 1fr));
Zero minimum helps long content avoid forced overflow. [2]
Sidebar and flexible content: grid-template-columns: 16rem minmax(0, 1fr);
Reserves a sidebar while allowing the main track to shrink. [2]
Responsive cards: grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
Fits as many suitably sized cards as the container permits. [2]
Grid gutters: gap: 1.5rem;
Sets both row and column gaps. [2]
Span two columns: grid-column: span 2;
Requires an appropriate grid placement context. [2]
Full-width item: grid-column: 1 / -1;
Runs between the explicit grid's outer column lines. [2]
Auto row minimum: grid-auto-rows: minmax(8rem, auto);
Allows content to grow beyond the minimum. [2]

Center both grid axes: place-items: center;
Aligns items within their grid areas. [4]
Stretch grid items: align-items: stretch;
Items fill available block-axis area when sizing permits. [4]
Border-box sizing: box-sizing: border-box;
Width/height include padding and borders. [4]
Responsive media width: max-width: 100%;
Prevents replaced content from exceeding its container width. [4]
Preserve media ratio: height: auto;
Useful with responsive image widths. [4]
Break long strings: overflow-wrap: anywhere;
Allows emergency breaks in long unbroken text. [4]
Reserve a ratio: aspect-ratio: 16 / 9;
Supplies a preferred width/height relationship. [4]
Small-screen stack: @media (max-width: 40rem) { .layout { grid-template-columns: 1fr; } }
Choose the breakpoint from actual content behavior. [4]

Reserved placement, separate from reference controls. No ad network is active.

Updated 2026-10-19Modern CSS · flex/grid layout

cheatsheetatlas.com/sheets/css-layout/ · Updated 2026-10-19 · Modern CSS · flex/grid layout