When should I use Flexbox vs Grid?

Flexbox excels at one-dimensional layouts — a row of nav items, a card with content aligned in a column. Grid is for two-dimensional layouts — a full page layout with header, sidebar, and main content. In practice they're often combined: Grid for page structure, Flexbox for component internals.

What is the difference between justify-content and align-items in Flexbox?

justify-content aligns items along the main axis (row direction by default). align-items aligns items along the cross axis. If flex-direction is row, justify-content controls horizontal alignment and align-items controls vertical alignment.

How do CSS custom properties (variables) work?

Declare them with '--name: value' on any element (usually :root for global scope). Use them with 'var(--name)' anywhere in CSS. They cascade like normal CSS properties, so you can override them in specific selectors for theming.

What are container queries and when should I use them?

Container queries apply styles based on the size of a containing element, not the viewport. Add 'container-type: inline-size' to the parent, then use '@container (min-width: N)' in CSS.

CSS Cheatsheet

Modern CSS reference — selectors, Flexbox, Grid, animations, custom properties, and container queries.

Last updated: April 2026

What it does

8 sections, 70+ properties

Covers selectors, box model, Flexbox, Grid, typography, colors, animations, and modern CSS.

Live examples

Multi-line examples show real-world property combinations, not just isolated values.

Modern CSS included

Includes container queries, cascade layers, oklch(), and @layer — browser-supported today.

How to use CSS Cheatsheet

1
Find what you need
Search by keyword (e.g., 'justify-content') or browse sections for Flexbox, Grid, animations, etc.
2
Read the syntax
Each entry shows the CSS syntax or property with all valid values and a practical example.
3
Copy to your stylesheet
Click copy and paste directly into your CSS, Tailwind config, or browser DevTools.
4
Check examples
Many entries have multi-line examples showing real-world usage patterns.

Frequently Asked Questions

When should I use Flexbox vs Grid?: Flexbox excels at one-dimensional layouts — a row of nav items, a card with content aligned in a column. Grid is for two-dimensional layouts — a full page layout with header, sidebar, and main content. In practice they're often combined: Grid for page structure, Flexbox for component internals.
What is the difference between justify-content and align-items in Flexbox?: justify-content aligns items along the main axis (row direction by default). align-items aligns items along the cross axis. If flex-direction is row, justify-content controls horizontal alignment and align-items controls vertical alignment.
How do CSS custom properties (variables) work?: Declare them with '--name: value' on any element (usually :root for global scope). Use them with 'var(--name)' anywhere in CSS. They cascade like normal CSS properties, so you can override them in specific selectors for theming.
What are container queries and when should I use them?: Container queries apply styles based on the size of a containing element, not the viewport. Add 'container-type: inline-size' to the parent, then use '@container (min-width: N)' in CSS.

Related Tools

widgets

React Cheatsheet

React hooks, component patterns, performance optimizations, and React 19 features. Search and copy instantly.

fork_right

Git Cheatsheet

Essential Git commands — setup, branching, merging, remotes, undoing changes, and more. Search and copy instantly.

menu_book

Cheatsheet Hub

Interactive cheatsheets for Git, CSS, Linux, React, Vim, and more. Search, filter, and copy commands instantly.