CSS Flexbox & Grid

Flexbox and Grid properties with common layout patterns

CSS Flexbox & Grid Cheatsheet

45 entries · click to copy

📦 Flexbox — Container

Enable flex container

Main axis direction

Allow items to wrap

Shorthand for flex-direction + flex-wrap

Align items along main axis

Align items along cross axis

Align wrapped lines (needs wrap)

Space between flex items

Space between columns only

Space between rows only

🧩 Flexbox — Items

Grow equally, shorthand for flex: 1 1 0

Fixed 200px, no grow or shrink

Grow to fill available space

Prevent item from shrinking

Initial size before grow/shrink

Override container's align-items for this item

Control item order (default 0)

Push item to far end of main axis

▦ Grid — Container

Enable grid container

3 columns with fractional units

3 equal columns

Responsive auto-fill columns

Define row sizes

Named template areas

Gap between all cells

Separate column and row gaps

Align items horizontally within cell

Align items vertically within cell

Align grid tracks horizontally

Align grid tracks vertically

Control auto-placement algorithm

🔲 Grid — Items

Span columns 1 to 3 (2 columns wide)

Span 2 columns

Span rows 1 to 3

Place in named area

row-start / col-start / row-end / col-end

Align item horizontally in cell

Align item vertically in cell

⭐ Common Patterns

Center single item vertically + horizontally

Navbar: logo left, items right

Responsive card row

Sidebar + main layout

Auto-responsive card grid

Center child horizontally + vertically (shorthand)

Sticky footer layout (header + main + footer)

Loading tool…