Layout — Cheat Sheet

Display, Normal Flow and Formatting Contexts

/* block — new line, fills the width, respects every box property */
div, p, h1, section, ul, li

/* inline — flows in the line, and IGNORES width, height and
   vertical margins. Horizontal padding works but does not push
   siblings apart vertically. */
span, a, strong, em, code
span { width: 200px }             /* has no effect */

/* inline-block — flows in the line, but accepts every box property */
.chip { display: inline-block; width: 6rem; padding: .5rem }

/* The mysterious gap between inline-block elements is the
   WHITESPACE in your HTML being rendered as a space character.
   Use flex with gap instead of fighting it. */

/* Two special values worth knowing */
display: none        /* removed from the layout AND from the
                        accessibility tree — screen readers skip it */
visibility: hidden   /* invisible but still occupies its space */
.sr-only             /* visually hidden but STILL announced —
                        the pattern for screen-reader-only text */

/* display: contents removes the box but keeps the children, useful
   for making a wrapper disappear from a grid — but it also removed
   semantics in older browsers, so avoid it on lists and tables. */

Flexbox

.row {
  display: flex;
  flex-direction: row;          /* main = horizontal, cross = vertical */
  justify-content: space-between;   /* along the MAIN axis */
  align-items: center;              /* along the CROSS axis */
  gap: 1rem;                        /* never margins between items */
}

/* Change the direction and both meanings swap: */
.col { flex-direction: column }   /* main = vertical, cross = horizontal */
/* now justify-content moves items UP and DOWN */

/* justify-content: flex-start | center | flex-end
                    space-between | space-around | space-evenly
   align-items:     stretch (default) | flex-start | center | flex-end
                    baseline                                        */

/* align-items: stretch is the default, which is why two cards in a
   row are automatically equal height — a genuinely useful default. */

/* Per-item override */
.logo { align-self: flex-start }

/* The classic header, in three lines */
header { display: flex; justify-content: space-between; align-items: center }

CSS Grid

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;   /* three columns */
  grid-template-rows: auto 1fr auto;
  gap: 1rem;                                 /* row and column gap */
}

/* fr = a fraction of the FREE space, after fixed tracks and gaps.
   This is why 1fr behaves and 33.33% overflows once gap is added. */
grid-template-columns: 1fr 2fr;      /* one third, two thirds */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, minmax(0, 1fr));   /* see below */

/* minmax(0, 1fr) instead of 1fr is the grid equivalent of the flex
   min-width: 0 fix — a track's default minimum is 'auto', so wide
   content stretches the column and breaks the layout. */

/* Placing items by line number (lines, not tracks — 4 lines for
   3 columns) */
.item { grid-column: 1 / 3 }        /* from line 1 to line 3 */
.item { grid-column: span 2 }       /* however many, span two */
.item { grid-column: 1 / -1 }       /* full width, whatever the count */
.item { grid-row: 2 / 4 }

/* Alignment works on both axes, with the same vocabulary */
place-items: center;                /* align-items + justify-items */
place-content: center;              /* the whole grid within the box */

Positioning — relative, absolute, fixed and sticky

/* static — the default. top/left/z-index do nothing. */

/* relative — stays in the flow and reserves its original space,
   but is visually nudged. Its main job is to be a positioning
   ancestor for something absolute inside it. */
.wrapper { position: relative }

/* absolute — REMOVED from the flow, positioned against the nearest
   positioned ancestor (or the page if there is none). */
.badge { position: absolute; top: -.5rem; inset-inline-end: -.5rem }

/* fixed — removed from the flow, positioned against the VIEWPORT,
   so it does not scroll. */
.fab { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem }

/* sticky — in the flow until it hits its threshold, then it stays. */
thead th { position: sticky; top: 0 }

/* inset is the shorthand for all four offsets */
.overlay { position: absolute; inset: 0 }        /* fill the parent */
.modal { position: fixed; inset: 0; display: grid; place-items: center }

/* Centring something absolute */
.center { position: absolute; inset: 0; margin: auto; width: 200px;
          height: 100px }

Stacking Contexts and z-index

<div class="a">        <!-- z-index: 1, creates a context -->
  <div class="modal">  <!-- z-index: 9999 -->
</div>
<div class="b">        <!-- z-index: 2 -->

.a { position: relative; z-index: 1 }
.modal { position: fixed; z-index: 9999 }
.b { position: relative; z-index: 2 }

/* .modal renders BEHIND .b.

   Because .a created a stacking context, .modal's 9999 only ranks it
   among .a's descendants. The whole of .a — modal included — is then
   placed at level 1, behind .b at level 2. No number inside .a can
   change that. */

/* The fix is never a bigger number. It is one of:
     - render the modal outside .a (a portal to document.body)
     - remove whatever made .a a stacking context
     - raise .a itself                                        */

/* Within one context, the paint order is:
     the element's background, negative z-index, block boxes,
     floats, inline content, z-index: 0/auto, then positive z-index */

Overflow and Scrolling

overflow: visible   /* default — content spills, visibly */
overflow: hidden    /* clipped, NOT scrollable — even by keyboard */
overflow: scroll    /* always shows a scrollbar track */
overflow: auto      /* scrollbar only when needed — usually correct */
overflow: clip      /* clips without creating a scroll container */

/* Separate axes */
overflow-x: auto; overflow-y: hidden;
/* Note: setting one axis to a non-visible value forces the other to
   'auto' — you cannot have visible on one and hidden on the other. */

/* Side effects of overflow != visible, all of which bite:
     - creates a block formatting context (stops margin collapsing)
     - BREAKS position: sticky for descendants
     - becomes the containing block for scroll calculations       */

/* overflow: clip avoids the scroll-container side effects, which
   makes it the better choice for pure clipping: */
.mask { overflow: clip }

/* Text overflow */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3;
           -webkit-box-orient: vertical; overflow: hidden }
.break { overflow-wrap: break-word }      /* long URLs and tokens */