When should I use Flexbox and when should I use Grid?

Reach for Flexbox when you lay out items in a single direction, a row or a column, like a navbar or a button group. Reach for Grid when you need rows and columns at the same time, like a page layout or a card gallery. Many real layouts use both: Grid for the page, Flexbox inside each cell.

How do I center a div horizontally and vertically?

The short version is three lines on the parent: display: flex, justify-content: center, and align-items: center. That centers the child on both axes no matter its size. Grid works too, with display: grid and place-items: center, which is even shorter and does the same job.

What is the difference between rem, em, and px?

px is a fixed pixel and ignores user settings. em is relative to the font size of the current element, so it compounds when nested. rem is relative to the root font size, which stays predictable. Use rem for font sizes and spacing so the layout scales when someone bumps their browser text size.

CSS Cheat Sheet 2026 (Selectors, Flexbox, Grid, Custom Properties)

CSS Cheat Sheet

Quick reference from FreeCodingCourses.com

Selectors

.class: every element with that class.
#id: the one element with that id.
div p: any p inside a div (descendant).
div > p: a p that is a direct child of a div.
a:hover: an anchor while the pointer is over it.
input:focus: the form field that has focus.
li:nth-child(2): the second li in its parent.
a[target="_blank"]: match by attribute value.

Box model

box-sizing: border-box: width includes padding and border.
margin: 0 auto: center a fixed-width block.
padding: 8px 16px: vertical then horizontal.
border: 1px solid #ccc: width, style, color.
max-width: 640px: cap the width while staying fluid.
overflow: hidden: clip content that spills out.

Flexbox

display: flex: make a flex container.
flex-direction: row | column: set the main axis.
justify-content: space-between: spacing along the main axis.
align-items: center: alignment on the cross axis.
gap: 16px: space between items, no margins needed.
flex: 1: item grows to fill the free space.
flex-wrap: wrap: let items flow onto new lines.

Grid

display: grid: make a grid container.
grid-template-columns: 1fr 1fr: two equal columns.
repeat(3, 1fr): shorthand for three equal columns.
repeat(auto-fit, minmax(200px, 1fr)): responsive columns, no media query.
gap: 24px: row and column gutters.
grid-column: span 2: make one item two columns wide.

Positioning

position: relative: nudge from the normal spot, keep the space.
position: absolute: placed against the nearest positioned parent.
position: fixed: pinned to the viewport.
position: sticky; top: 0: sticks once it reaches the top.
z-index: 10: stacking order (needs a position).
inset: 0: shorthand for top/right/bottom/left: 0.

Typography and color

font-size: 1.25rem: rem scales with the root font size.
line-height: 1.5: unitless multiplies the font size.
color: #333: text color.
text-align: center: horizontal text alignment.
font-weight: 600: 400 is normal, 700 is bold.
rgb(0 0 0 / 50%): a color with 50 percent alpha.

Custom properties and motion

--brand: #2563eb: declare a variable, usually on :root.
color: var(--brand): use the variable anywhere.
var(--gap, 16px): fallback if the variable is unset.
@media (min-width: 768px): apply rules above a width.
transition: all 0.2s ease: animate property changes.
transform: translateY(-2px): move without reflowing the layout.

Unlock the full CSS cheat sheet

You're seeing 2 of 7 sections. Drop your email to open the rest plus the gotchas, and save the whole thing as a printable PDF.

No spam, unsubscribe anytime. See our privacy policy.

CSS cheat sheet