771 commands · 48 cheat sheets · 6 subcategories
CSS master quick reference — Page 2
Browse 195 commands from 12 focused cheat sheets on page 2 of 4. Each example opens its matching detailed section.
Layout and Sizing · 10 commands
CSS Container Queries and Containment Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create an inline-size container | .card-shell { container-type: inline-size; } | View examples |
| Name a container | .sidebar { container: sidebar / inline-size; } | View examples |
| Query container width | @container (width >= 36rem) {
.card { grid-template-columns: 1fr 2fr; };
} | View examples |
| Query a named container | @container sidebar (width > 24rem) {
.nav { display: flex; };
} | View examples |
| Use a bounded range | @container (20rem <= width < 40rem) {
.card { gap: 1rem; };
} | View examples |
| Use inline container units | .title { font-size: clamp(1rem, 5cqi, 2rem); } | View examples |
| Use smaller container axis | .art { border-radius: 4cqmin; } | View examples |
| Query a custom property | @container style(--theme: dark) {
.card { color: white; };
} | View examples |
| Contain layout effects | .widget { contain: layout paint; } | View examples |
| Skip off-screen rendering | .feed-item {
content-visibility: auto;
contain-intrinsic-size: auto 20rem;
} | View examples |
Layout and Sizing · 15 commands
CSS Flexbox Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create a flex container | display: flex; | View examples |
| Flow in a row | flex-direction: row; | View examples |
| Flow in a column | flex-direction: column; | View examples |
| Allow wrapping | flex-wrap: wrap; | View examples |
| Space items evenly | gap: 1rem; | View examples |
| Set row spacing | row-gap: 2rem; | View examples |
| Set column spacing | column-gap: 1rem; | View examples |
| Align at main-axis start | justify-content: flex-start; | View examples |
| Center on the main axis | justify-content: center; | View examples |
| Separate items evenly | justify-content: space-between; | View examples |
| Align at cross-axis start | align-items: flex-start; | View examples |
| Center on the cross axis | align-items: center; | View examples |
| Stretch on the cross axis | align-items: stretch; | View examples |
| Set flexible item sizing | flex: 1 1 16rem; | View examples |
| Push an item to the end | margin-inline-start: auto; | View examples |
Layout and Sizing · 16 commands
CSS Grid Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Create a grid container | display: grid; | View examples |
| Define explicit columns | grid-template-columns: 16rem 1fr; | View examples |
| Repeat equal columns | grid-template-columns: repeat(3, 1fr); | View examples |
| Space grid tracks | gap: 1rem; | View examples |
| Create responsive columns | grid-template-columns:
repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); | View examples |
| Protect flexible tracks | grid-template-columns: minmax(0, 1fr) 20rem; | View examples |
| Size implicit rows | grid-auto-rows: minmax(8rem, auto); | View examples |
| Place by column lines | grid-column: 1 / 3; | View examples |
| Span multiple columns | grid-column: span 2; | View examples |
| Place by row lines | grid-row: 1 / -1; | View examples |
| Declare named areas | grid-template-areas:
'header header'
'sidebar main'
'footer footer'; | View examples |
| Assign an item to an area | grid-area: main; | View examples |
| Align items vertically | align-items: center; | View examples |
| Align items horizontally | justify-items: stretch; | View examples |
| Set both item alignments | place-items: center; | View examples |
| Inherit parent columns | grid-template-columns: subgrid; | View examples |
Layout and Sizing · 19 commands
CSS Intrinsic Size Animation: interpolate-size and calc-size() Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Enable keyword interpolation | .disclosures { interpolate-size: allow-keywords; } | View examples |
| Restore default behavior | .no-intrinsic-motion { interpolate-size: numeric-only; } | View examples |
| Transition height to auto | .panel {
height:0;
transition:height .25s;
} .panel.open { height:auto;;
} | View examples |
| Transition to max-content | .label {
width:8rem;
transition:width .2s;
} .label:hover { width:max-content;;
} | View examples |
| Animate flex-basis content | .item {
flex-basis:4rem;
} .item.open { flex-basis:content;;
} | View examples |
| Pass through auto | .panel { height:calc-size(auto, size); } | View examples |
| Add to an intrinsic size | .panel { height:calc-size(auto, size + 2rem); } | View examples |
| Scale a fit-content size | .tag { width:calc-size(fit-content, size * .8); } | View examples |
| Round an intrinsic result | .menu {
width:calc-size(max-content, round(up, size, 2rem));
} | View examples |
| Gate intrinsic interpolation | @supports (interpolate-size: allow-keywords) {
.panel { transition: height .25s; };
} | View examples |
| Gate intrinsic calculation | @supports (height: calc-size(auto, size)) {
.panel { height: calc-size(auto, size); };
} | View examples |
| Use a broad disclosure fallback | .content {
display:grid;
grid-template-rows:0fr;
} .open .content { grid-template-rows:1fr;;
} | View examples |
| Skip closed content | .closed { content-visibility:hidden; } | View examples |
| Limit layout propagation | .component { contain:layout; } | View examples |
| Clip the animated reveal | .panel { overflow:clip; } | View examples |
| Disable intrinsic transitions | @media (prefers-reduced-motion: reduce) {
.panel { transition:none; };
} | View examples |
| Use native disclosure markup | <details><summary>Release notes</summary><div class="panel">Content</div></details> | View examples |
| Avoid hiding focused content | if (panel.contains(document.activeElement)) summary.focus(); | View examples |
| Test intrinsic changes during loading | .panel {
max-inline-size: 100%;
overflow-wrap: anywhere;
} | View examples |
Layout and Sizing · 18 commands
CSS Intrinsic Sizing: min-content, max-content, and fit-content Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Use the minimum intrinsic width | .label { inline-size: min-content; } | View examples |
| Use the maximum intrinsic width | .label { inline-size: max-content; } | View examples |
| Fit within available space | .panel { inline-size: fit-content; } | View examples |
| Cap a grid track | grid-template-columns:
fit-content(18rem) minmax(0, 1fr); | View examples |
| Cap shrink-to-fit width | .popover { width: fit-content(28rem); max-width: 100%; } | View examples |
| Build intrinsic card tracks | grid-template-columns:
repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); | View examples |
| Let a flexible track shrink | grid-template-columns:
minmax(0, 1fr) minmax(12rem, 24rem); | View examples |
| Allow a flex item to shrink | .content { min-inline-size: 0; } | View examples |
| Break emergency text | .message { overflow-wrap: anywhere; } | View examples |
| Enable language-aware hyphenation | .copy { hyphens: auto; overflow-wrap: break-word; } | View examples |
| Contain preformatted overflow | pre { max-inline-size: 100%; overflow: auto; } | View examples |
| Supply a skipped-content estimate | .card {
content-visibility: auto;
contain-intrinsic-size: auto 24rem;
} | View examples |
| Isolate size calculation | .widget { contain: inline-size; } | View examples |
| Layer a keyword fallback | .chip {
width: auto;
width: max-content;
max-width: 100%;
} | View examples |
| Measure overflow | element.scrollWidth > element.clientWidth | View examples |
| Size a label column intrinsically | grid-template-columns: min-content minmax(0, 1fr); | View examples |
| Keep controls unwrapped | grid-template-columns: max-content minmax(0, 1fr); | View examples |
| Constrain the logical axis | .dialog {
inline-size: fit-content;
max-inline-size: min(42rem, 100%);
} | View examples |
Layout and Sizing · 15 commands
CSS Multi-column Layout Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Choose an optimal column width | .story { column-width: 18rem; } | View examples |
| Request a column count | .story { column-count: 3; } | View examples |
| Use the columns shorthand | .story { columns: 18rem; } | View examples |
| Cap responsive columns | .story { columns: 3 18rem; } | View examples |
| Set the column gutter | .story { column-gap: 2rem; } | View examples |
| Draw a column rule | .story { column-rule: 1px solid #94a3b8; } | View examples |
| Keep a figure together | figure { break-inside: avoid; } | View examples |
| Start a new column | .new-topic { break-before: column; } | View examples |
| Protect paragraph starts | p { orphans: 3; } | View examples |
| Protect paragraph endings | p { widows: 3; } | View examples |
| Span every column | .story > h2 { column-span: all; } | View examples |
| Balance column heights | .story { column-fill: balance; } | View examples |
| Fill columns sequentially | .story { column-fill: auto; } | View examples |
| Disable columns in tight viewports | @media (max-width: 42rem) { .story { columns: auto; } } | View examples |
| Contain replaced content | .story img { max-inline-size: 100%; block-size: auto; } | View examples |
Layout and Sizing · 16 commands
CSS Positioning and Stacking Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Use normal positioning | .item { position: static; } | View examples |
| Offset without leaving flow | .item { position: relative; inset-block-start: .5rem; } | View examples |
| Position inside an ancestor | .badge {
position: absolute;
inset-block-start: .5rem;
inset-inline-end: .5rem;
} | View examples |
| Establish a containing block | .card { position: relative; } | View examples |
| Fill a containing block | .overlay { position: absolute; inset: 0; } | View examples |
| Use flow-relative edges | .badge {
inset-block-start: .5rem;
inset-inline-end: .5rem;
} | View examples |
| Fix to the viewport | .help {
position: fixed;
inset-block-end: 1rem;
inset-inline-end: 1rem;
} | View examples |
| Make a heading sticky | .heading { position: sticky; inset-block-start: 0; } | View examples |
| Define a scroll container | .panel { max-block-size: 20rem; overflow: auto; } | View examples |
| Set a positioned stack level | .popover { position: absolute; z-index: 10; } | View examples |
| Isolate component stacking | .component { isolation: isolate; } | View examples |
| Recognize a transform context | .panel { transform: translateZ(0); } | View examples |
| Recognize opacity stacking | .panel { opacity: .99; } | View examples |
| Center an overlay item | .dialog {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
} | View examples |
| Cover a container | .scrim {
position: absolute;
inset: 0;
background: rgb(0 0 0 / .55);
} | View examples |
| Layer dialog content | .dialog { position: relative; z-index: 1; } | View examples |
Layout and Sizing · 15 commands
CSS Table Layout and Border Collapsing Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Fill the containing block | .data-table { inline-size: 100%; } | View examples |
| Move the caption | .data-table caption { caption-side: bottom; } | View examples |
| Align cell content | .data-table :is(th, td) {
text-align: start;
vertical-align: top;
} | View examples |
| Use content-aware layout | .content-sized { table-layout: auto; } | View examples |
| Use fixed table layout | .predictable { inline-size: 100%; table-layout: fixed; } | View examples |
| Size a column | .predictable col:first-child { inline-size: 12rem; } | View examples |
| Break unspaced values | .predictable :is(th, td) { overflow-wrap: anywhere; } | View examples |
| Use separated borders | .spaced {
border-collapse: separate;
border-spacing: 0.5rem 0.75rem;
} | View examples |
| Hide empty cell paint | .spaced { empty-cells: hide; } | View examples |
| Round separate cells | .spaced :is(th, td) {
border: 1px solid #cbd5e1;
border-radius: 0.4rem;
} | View examples |
| Collapse adjacent borders | .ruled { border-collapse: collapse; } | View examples |
| Draw compact rules | .ruled :is(th, td) {
border: 1px solid #94a3b8;
padding: 0.65rem;
} | View examples |
| Contain horizontal overflow | .table-scroll {
max-inline-size: 100%;
overflow-x: auto;
} | View examples |
| Preserve useful columns | .table-scroll > table { min-inline-size: 42rem; } | View examples |
| Request intact printed rows | @media print { .data-table tr { break-inside: avoid; } } | View examples |
Typography and Content · 16 commands
CSS Generated Content, Counters, Quotes, and Markers Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Insert content before | .note::before { content: "Note: "; } | View examples |
| Read an attribute | .tag::after { content: " [" attr(data-state) "]"; } | View examples |
| Suppress generated content | .note:empty::before { content: none; } | View examples |
| Generate a line break | .label::after { content: "\A"; white-space: pre; } | View examples |
| Create a counter | .procedure { counter-reset: step; } | View examples |
| Increment a counter | .procedure > li { counter-increment: step; } | View examples |
| Render a counter | .procedure > li::marker {
content: "Step " counter(step) ": ";
} | View examples |
| Choose a counter style | .appendix::before {
content: counter(appendix, upper-alpha) ". ";
} | View examples |
| Scope nested counters | .outline, .outline ol { counter-reset: item; } | View examples |
| Render the counter chain | .outline li::marker {
content: counters(item, ".") " ";
} | View examples |
| Define quote pairs | :lang(fr) { quotes: "« " " »" "‹ " " ›"; } | View examples |
| Generate quotation marks | .quotation::before {
content: open-quote;
} .quotation::after { content: close-quote;;
} | View examples |
| Style list markers | .tasks > li::marker {
color: #0f766e;
font-weight: 700;
} | View examples |
| Replace marker content | .tasks > li::marker { content: "✓ "; } | View examples |
| Use native list numbering | ol > li::marker { content: counter(list-item) ". "; } | View examples |
| Keep essential text in HTML | <button><span aria-hidden="true">✓</span> Save changes</button> | View examples |
Typography and Content · 15 commands
CSS List Markers and Counter Styles Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Choose an unordered marker | .features { list-style-type: square; } | View examples |
| Choose an ordered style | .chapters { list-style-type: upper-roman; } | View examples |
| Keep markers outside | .checklist { list-style-position: outside; } | View examples |
| Style marker text | .checklist > li::marker {
color: #0f766e;
font-weight: 700;
} | View examples |
| Provide an image fallback | .links { list-style: circle outside url("arrow.svg"); } | View examples |
| Disable marker images | .plain { list-style-image: none; } | View examples |
| Use a short string marker | .steps { list-style-type: "→ "; } | View examples |
| Define a cyclic style | @counter-style status-dot {
system: cyclic;
symbols: "●";
suffix: " ";
fallback: disc;
} | View examples |
| Define fixed symbols | @counter-style circled-step {
system: fixed;
symbols: "①" "②" "③";
suffix: " ";
fallback: decimal;
} | View examples |
| Apply a named style | .milestones { list-style-type: circled-step; } | View examples |
| Create an anonymous style | .tags { list-style-type: symbols(cyclic "◆" "◇"); } | View examples |
| Set a list-item value | .resume-at-five { counter-set: list-item 4; } | View examples |
| Differentiate nested lists | .outline ul ul { list-style-type: circle; } | View examples |
| Feature-query ::marker | @supports selector(li::marker) {
li::marker { color: #0f766e; };
} | View examples |
| Keep real list markup | <ol><li>Download</li><li>Verify</li><li>Install</li></ol> | View examples |
Typography and Content · 20 commands
CSS Logical Properties and Writing Modes Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Use horizontal lines | .copy { writing-mode: horizontal-tb; } | View examples |
| Set vertical right-to-left flow | .vertical-copy { writing-mode: vertical-rl; } | View examples |
| Set vertical left-to-right flow | .vertical-copy { writing-mode: vertical-lr; } | View examples |
| Declare RTL content | <html lang="ar" dir="rtl"> | View examples |
| Detect unknown text direction | <bdi dir="auto">اسم المستخدم</bdi> | View examples |
| Set direction outside HTML | .xml-rtl { direction: rtl; } | View examples |
| Set vertical-flow margins | .section { margin-block: 2rem 1rem; } | View examples |
| Center along the inline axis | .panel { margin-inline: auto; } | View examples |
| Pad inline edges | .button { padding-inline: 1rem; } | View examples |
| Mark the leading edge | .note { border-inline-start: 0.25rem solid #2563eb; } | View examples |
| Set inline size | .avatar { inline-size: 3rem; } | View examples |
| Limit readable measure | .prose { max-inline-size: 65ch; } | View examples |
| Set minimum block size | .empty-state { min-block-size: 12rem; } | View examples |
| Position from logical edges | .badge {
inset-block-start: 0.5rem;
inset-inline-end: 0.5rem;
} | View examples |
| Align text to line start | .label { text-align: start; } | View examples |
| Float with reading direction | .thumbnail { float: inline-start; } | View examples |
| Round the starting corner | .card { border-start-start-radius: 1rem; } | View examples |
| Keep vertical glyphs upright | .vertical-copy { text-orientation: upright; } | View examples |
| Combine short vertical text | .digits { text-combine-upright: all; } | View examples |
| Feature-query a migration | @supports (margin-inline-start: 1rem) {
.item { margin-inline-start: 1rem; };
} | View examples |
Typography and Content · 20 commands
CSS Ruby, Line Breaking, and Hyphenation Cheat Sheet
| Use | Syntax | Examples |
|---|---|---|
| Add a ruby annotation | <ruby>漢字<rt>かんじ</rt></ruby> | View examples |
| Add legacy fallback punctuation | <ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby> | View examples |
| Declare annotation language | <ruby lang="ja">東京<rt>とうきょう</rt></ruby> | View examples |
| Place ruby underneath | ruby { ruby-position: under; } | View examples |
| Distribute ruby text | ruby { ruby-align: space-around; } | View examples |
| Disable ruby overhang | ruby { ruby-overhang: none; } | View examples |
| Enable automatic hyphenation | :lang(en) { hyphens: auto; } | View examples |
| Honor manual opportunities | .product-name { hyphens: manual; } | View examples |
| Choose the hyphen glyph | :lang(en) { hyphenate-character: auto; } | View examples |
| Constrain hyphenated fragments | .prose { hyphenate-limit-chars: 6 3 2; } | View examples |
| Wrap an unbreakable token | .token { overflow-wrap: anywhere; } | View examples |
| Use normal wrapping | .prose { overflow-wrap: normal; } | View examples |
| Break non-CJK text anywhere | .machine-output { word-break: break-all; } | View examples |
| Use strict CJK rules | :lang(ja) { line-break: strict; } | View examples |
| Loosen short-line rules | .narrow:lang(ja) { line-break: loose; } | View examples |
| Keep CJK phrases together | .short-label:lang(ko) { word-break: keep-all; } | View examples |
| Restore language defaults | .article { word-break: normal; } | View examples |
| Suggest a hyphenated break | interna­tionalization | View examples |
| Suggest a non-hyphen break | api.example.com/<wbr>v2/<wbr>reports | View examples |
| Balance a short heading | h2 { text-wrap: balance; } | View examples |