CSS Layouts Cheatsheet

This cheatsheet attempts to provide a comparative look across different layout properties for Tables, Grids, and Flexboxes. Starting first with block-level elements.

Default Block Element Properties (Items)

margin: 0 [unit, percent, auto]
padding: 0 [unit, percent, auto]
border: none [unit, solid, dashed, dotted, double...]
width/height: auto [unit, percent, max-content, min-content, fit-content]
max-width/min-width: none [unit, percent]
max-height/min-height: none [unit, percent]
position: static [relative, absolute, fixed, sticky]
top, left, bottom, right: auto [length, percent]
z-index:auto [integer]
overflow: visible [hidden, scroll, auto, clip]
box-sizing: content-box [border-box]

Default Parent Layout Container Declarations

display:table 
  border-spacing:0; 
  border-collapse:separate

display:flex
  flex-direction: row [row-reverse, column, column-reverse]
  justify-content: flex-start [row-reverse, column column-reverse]
  align-items: stretch [flex-start, flex-end, center, baseline]
  align-content: stretch (multiline)
  flex-wrap: nowrap

display:grid
  grid-template-rows: none
  grid-template-columns: none
  grid-auto-flow: row [column, dense, row dense, column dense]
  gap: 0
  align-items: stretch
  justify-items: stretch
  align-content: stretch

Axes

• flex-direction (Flexbox):
  Values: row, row-reverse, column, column-reverse. Defines the main axis direction.
• grid-auto-flow (Grid):
  Values: row, column, dense, row dense, column dense. Controls item placement flow.
• writing-mode (Block/Inline):
  Values: horizontal-tb, vertical-rl, vertical-lr. Determines text and inline content flow direction.

Default Child Item Sizing

• flex (Flexbox):
  Values: none, auto, 1, 2, etc. Defines how a flex item grows, shrinks, or uses available space.
• grid-template-columns / grid-template-rows (Grid):
  Values: Length units (e.g., 100px), auto, min-content, max-content, repeat(), fr. Specifies row/column sizes.
• box-sizing (All Layouts):
  Values: content-box, border-box. Controls how width/height include padding and border.

Justification (Main Axis)

• justify-content (Flexbox/Grid):
  Values: flex-start, flex-end, center, space-between, space-around, space-evenly. Distributes items along the main axis.
• text-align (Block/Inline):
  Values: start, end, center, justify. Aligns inline content within a block container.
• justify-items (Grid):
  Values: start, end, center, stretch. Aligns grid items within their cells along the main axis.

Alignment (Cross Axis)

• align-items (Flexbox/Grid):
  Values: stretch, flex-start, flex-end, center, baseline. Aligns items along the cross axis for single-line layouts.
• align-self (Per item, Flexbox/Grid):
  Values: Same as align-items. Allows individual item alignment.
• align-content (Flexbox/Grid):
  Values: stretch, flex-start, flex-end, center, space-between, space-around. Controls multi-line layouts.
• vertical-align (Inline/Table):
  Values: baseline, top, middle, bottom, text-top, text-bottom. Aligns inline elements relative to their line box.

Wrapping and Overflow

• flex-wrap (Flexbox):
  Values: nowrap, wrap, wrap-reverse. Determines whether items wrap onto multiple lines.
• overflow (All Layouts):
  Values: visible, hidden, scroll, auto, clip. Controls how content exceeding the container is handled.
• white-space (Inline):
  Values: normal, nowrap, pre, pre-wrap, pre-line. Defines how text wraps within inline or block containers.

Explicit and Implicit Layout

• grid-template-areas (Grid):
  Values: Custom strings (e.g., "a a b"). Defines named areas in a grid.
• grid-template (Grid):
  Values: Combines grid-template-rows and grid-template-columns.
• grid-auto-rows / grid-auto-columns (Grid):
  Values: Length units, min-content, max-content, auto. Controls the size of implicitly created rows/columns.
• table-layout (Table):
  Values: auto, fixed. Determines whether column widths adjust based on content.

Responsiveness

• media (All Layouts):
  Values: Breakpoints like max-width, min-width, max-height, min-height. Adapts layouts to viewport size.
• aspect-ratio (All Layouts):
  Values: Numeric ratios (e.g., 16/9, 1/1). Maintains proportional dimensions.
• min-width / max-width / min-height / max-height (All Layouts):
  Values: Length units (e.g., 100px, 50%). Constrains element dimensions.
• object-fit (Replaced Elements, e.g., Images):
  Values: fill, contain, cover, none, scale-down. Adjusts content scaling within its container.

Unit Lengths

ABSOLUTE

• px (pixels)
• cm (centimeters)
• mm (millimeters)
• in (inches)
• pt (points, 1/72 of an inch)
• pc (picas, 1/6 of an inch)

RELATIVE

• % (percentage, relative to parent element)
• em (relative to the font size of the element)
• rem (relative to the font size of the root element)
• vh (relative to 1% of the viewport height)
• vw (relative to 1% of the viewport width)
• vmin (relative to 1% of the smaller viewport dimension)
• vmax (relative to 1% of the larger viewport dimension)
• ch (relative to the width of the "0" character of the font)
• ex (relative to the height of the font’s "x")
• cap (relative to the height of capital letters)
• ic (relative to the width of ideographic characters)
• lh (relative to the line-height of the element)
• rlh (relative to the root line-height)