Code

CSS

Colors

Color formats, opacity, gradients, and CSS custom properties.

Typography

Font stacks, sizing, weight, line-height, spacing, and truncation.

Sizing

Width, height, min/max, units, aspect-ratio, and clamp().

Box Model

Content, padding, border, margin, box-sizing, and margin collapse.

Flexbox

One-dimensional layout — direction, alignment, wrap, grow/shrink.

Grid

Two-dimensional layout — columns, rows, areas, auto-fill, and dense.

Responsive Design

Media queries, mobile-first, container queries, and fluid techniques.

Animation

@keyframes, timing functions, fill-mode, staggered sequences and more.

Generative Art with CSS

Pure CSS as a generative-art engine — layered gradients, blend modes, keyframe motion, and noise.

CSS Sizing

Width, height, min/max constraints, intrinsic sizing, and all unit types. MDN Reference

1. width & height

width: 100%

width: 75%

width: 50%

width: 25%

width: 200px

width: 100%;      /* fill parent */
width: 200px;     /* fixed */
width: 50vw;      /* viewport width */

height: 100%;     /* fill parent (needs parent height) */
height: 200px;
height: 50vh;     /* viewport height */

/* Auto — shrinks to content */
width: auto;
height: auto;

2. min-width, max-width, min-height, max-height

Resize the window — this box has min-width: 120px and max-width: 360px.

.card {
  width: 100%;
  min-width: 120px;
  max-width: 360px;
}

.hero {
  min-height: 400px;
  /* content can still grow */
}

/* Container pattern */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

3. CSS units

Unit	Type	Description	Example
`px`	Absolute	1 CSS pixel (device-independent)	`width: 200px`
`rem`	Relative	Relative to root font-size (default 16px)	`font-size: 1.5rem`
`em`	Relative	Relative to element's own font-size	`padding: 1.25em`
`%`	Relative	Relative to parent dimension	`width: 50%`
`vw`	Viewport	1% of viewport width	`width: 50vw`
`vh`	Viewport	1% of viewport height	`height: 100vh`
`dvh`	Viewport	Dynamic viewport height (mobile-aware)	`height: 100dvh`
`svh`	Viewport	Small viewport height (excludes toolbars)	`min-height: 100svh`
`cqw`	Container	1% of the nearest container width	`font-size: 5cqw`
`ch`	Font-relative	Width of the "0" glyph	`max-width: 60ch`

4. Intrinsic sizing keywords

width: fit-content — hugs content

width: min-content — narrowest possible

width: max-content — no wrapping

/* Shrinks to content width */
width: fit-content;

/* Narrowest without overflow */
width: min-content;

/* Full content width, no wrap */
width: max-content;

/* Useful for centering a block */
.pill {
  width: fit-content;
  margin-inline: auto;
}

5. aspect-ratio

1:1

16:9

4:3

3:4

/* Set height from width automatically */
.square   { aspect-ratio: 1; }
.video    { aspect-ratio: 16 / 9; }
.photo    { aspect-ratio: 4 / 3; }
.portrait { aspect-ratio: 3 / 4; }

/* Responsive image placeholder */
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

6. clamp() — fluid sizing

Resize the browser to see fluid changes.

font-size: clamp(1rem, 3vw, 2.5rem)

width: clamp(200px, 50%, 600px)

/* clamp(min, preferred, max) */

/* Fluid font */
font-size: clamp(1rem, 3vw, 2.5rem);

/* Fluid width */
width: clamp(200px, 50%, 600px);

/* Fluid padding */
padding: clamp(1rem, 4vw, 3rem);

/* Fluid gap */
gap: clamp(0.5rem, 2vw, 1.5rem);