CSS and Tailwind Cheat Sheet: Flexbox, Grid and Centering Solved

CSS and Tailwind Cheat Sheet

Two things account for most CSS lookups: choosing between Flexbox and Grid, and centering something.

This sheet solves both properly, then covers the responsive, spacing, and specificity rules you reach for daily. Every section shows plain CSS alongside the Tailwind equivalent.

Updated for 2026. Tailwind CSS 3.x class names.

Flexbox or Grid — The Decision

One dimension → Flexbox. Two dimensions → Grid.

The signal that you chose wrong: you are adding wrapper <div>s purely to force alignment. That is a one-dimensional tool being bent into a two-dimensional job.

They compose well. Grid for the page skeleton, Flexbox inside the cells, is a common and correct pattern.

Centering — Every Method

Both axes, Flexbox (the default answer):

.parent { display: flex; align-items: center; justify-content: center; }

<div class="flex items-center justify-center">

Both axes, Grid (shorter):

.parent { display: grid; place-items: center; }

<div class="grid place-items-center">

Horizontal only, block element:

.child { margin-inline: auto; max-width: 40rem; }

<div class="mx-auto max-w-2xl">

mx-auto needs a width or max-width to have any effect. Without one, the element already fills its parent and there is nothing to center.

Absolute positioning (when the parent cannot be changed):

.child {
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

Flexbox Reference

.container {
  display: flex;
  flex-direction: row;          /* row | column | row-reverse */
  justify-content: center;      /* along the main axis */
  align-items: center;          /* across the cross axis */
  gap: 1rem;
  flex-wrap: wrap;
}

.item {
  flex: 1;                      /* grow to fill */
  flex: 0 0 200px;              /* fixed 200px, no grow or shrink */
  align-self: flex-end;         /* override for one item */
}

justify-content follows the main axis; align-items crosses it. With flex-direction: column, they swap meaning — justify-content becomes vertical. This is the source of most "why is it not centering" confusion.

Use gap, not margins. gap spaces items without adding an unwanted margin at the ends, and it does not require a :last-child override.

Grid Reference

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: 250px 1fr;                          /* sidebar + main */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive */
  gap: 1rem;
}

.item {
  grid-column: span 2;
  grid-column: 1 / -1;          /* full width */
}

The one line worth memorising:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

That produces a responsive card grid with no media queries at all. Columns fit as many as will hold 250px, and stretch to fill the remainder. In Tailwind, use an arbitrary value: grid-cols-[repeat(auto-fit,minmax(250px,1fr))].

Units

Use rem for typography and spacing. px does not scale when a user increases their browser font size, which is an accessibility failure that affects real people.

Use dvh instead of vh on mobile. 100vh ignores the browser's collapsing toolbar, so a full-screen section overflows and the page scrolls slightly. 100dvh accounts for it.

Tailwind's spacing scale is already in rem: p-4 is 1rem, p-8 is 2rem. Each step is 0.25rem.

Responsive Design

Tailwind is mobile-first: an unprefixed class applies everywhere, and a prefixed one applies from that breakpoint upward.

<div class="text-sm md:text-base lg:text-lg">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div class="flex flex-col md:flex-row">

/* the plain-CSS equivalent */
@media (min-width: 768px) { ... }

The common mistake: writing the desktop layout with unprefixed classes and then overriding downward. That fights the framework and produces long class strings full of contradictions. Write mobile first with no prefix, then add prefixes only where larger screens genuinely differ.

Container queries are now widely supported and are often the better tool — they respond to the component's width rather than the viewport's:

<div class="@container">
  <div class="@md:flex">

Position

position: static;      /* default */
position: relative;    /* offset from normal position; anchors absolute children */
position: absolute;    /* removed from flow; positioned to nearest positioned ancestor */
position: fixed;       /* positioned to the viewport */
position: sticky;      /* relative until it hits a threshold, then fixed */

top: 0; right: 0; bottom: 0; left: 0;
inset: 0;              /* shorthand for all four */

.header { position: sticky; top: 0; z-index: 10; }

<header class="sticky top-0 z-10">

sticky needs a threshold. position: sticky with no top, bottom, left or right does nothing at all, silently.

absolute needs a positioned ancestor. Without one, it positions relative to the document, not the container you assumed. Add position: relative — Tailwind relative — to the parent.

Common Patterns

/* truncate one line */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* clamp to N lines */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* aspect ratio */
.video { aspect-ratio: 16 / 9; }

/* full-bleed inside a constrained container */
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

<p class="truncate">
<p class="line-clamp-3">
<div class="aspect-video">

Horizontal overflow on mobile is the most common layout bug. It is nearly always one of three things: a fixed-width element wider than the screen, a 100vw element inside a padded container, or a long unbroken string such as a URL. For the last, use break-words — Tailwind break-words — or overflow-wrap: anywhere.

Specificity

Specificity is a three-part score, highest wins regardless of order:

#nav .item a     → 100 + 10 + 1 = 111
.nav .item a     →  10 + 10 + 1 =  21     ← loses, even if written later

Only when two rules score identically does source order decide.

On !important: it wins the current argument and guarantees you will have a harder one later, because overriding it requires another !important. Legitimate uses are narrow — overriding inline styles from a third-party widget you do not control, or utility classes explicitly designed to be final.

If you are reaching for it inside your own components, the real problem is a competing selector that is more specific than it needs to be. Lower that one instead of raising this one.

The Five Traps

1. justify-content and align-items swapping meaning when flex-direction is column. They follow the main axis, not the screen.

2. mx-auto with no width. The element already fills its parent; there is nothing left to center.

3. position: sticky with no top. Silently does nothing.

4. 100vh on mobile. The browser toolbar makes it too tall. Use 100dvh.

5. Reaching for !important. Escalates a fight you have to win again later. Reduce the competing selector.

Print This Section

CHOOSE    one dimension → flex        two dimensions → grid

CENTER    flex items-center justify-center      (both axes)
          grid place-items-center               (shorter)
          mx-auto max-w-2xl                     (horizontal, needs a width)

GRID      repeat(auto-fit, minmax(250px, 1fr))  ← responsive, no media query

UNITS     rem for type and spacing · dvh not vh on mobile · px only for borders

MOBILE    Tailwind is mobile-first: unprefixed = all sizes, md: = 768px and up

GOTCHA    sticky needs top-0 · absolute needs a relative parent
          column direction swaps justify/align

Most CSS frustration is one of two questions: which layout system, and why is this rule losing. Flexbox for one axis, Grid for two, and a specificity score that ignores source order — those three facts resolve the majority of it.

🔗 Next in this collection: React Developer Cheat Sheet, or return to The Complete Developer Cheat Sheet Collection.