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.

terminal

Linux Commands Cheatsheet

Essential Linux and Bash commands for navigation, files, processes, networking, and scripting. Search and copy instantly.

keyboard

Vim Cheatsheet

Vim modes, navigation, editing, search & replace, macros, and essential config. Search and copy instantly.