CSS Layout + UI Cheatsheet

Layout Essentials

* { box-sizing: border-box; }

Keep padding and borders inside the declared width.

display: block | inline | inline-block;

Control flow behavior and line wrapping.

position: relative | absolute | fixed | sticky;

Pick the right positioning model for overlays and sticky UI.

inset: 0;

Pin a positioned element to all edges of its container.

z-index: 10;

Stacking order for layered UI.

Flexbox

display: flex;

Create a flex container for one-dimensional layout.

flex-direction: row | column;

Choose horizontal or vertical flow.

justify-content: space-between | center;

Distribute items along the main axis.

align-items: center | stretch;

Align items on the cross axis.

gap: 16px;

Space between items without manual margins.

flex: 1 1 auto;

Allow items to grow and shrink with available space.

min-width: 0;

Let flex children shrink so text can ellipsize or wrap.

Grid

display: grid;

Create a grid container for two-dimensional layout.

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

Responsive columns without media queries.

gap: 24px;

Consistent spacing between rows and columns.

place-items: center;

Align items both horizontally and vertically.

grid-column: 1 / -1;

Make an element span the full grid width.

Sizing + Units

max-width: 1200px; margin: 0 auto;

Center content and avoid over-wide layouts.

clamp(1rem, 2vw + 1rem, 2rem)

Fluid sizing that stays within min and max values.

aspect-ratio: 16 / 9;

Reserve space for media before it loads.

rem, em, %, vw, vh

Use relative units to keep scale consistent across devices.

Typography

font-family: "Space Grotesk", sans-serif;

Define the base font stack.

line-height: 1.5;

Improve readability for body text.

letter-spacing: 0.02em;

Fine tune headings and all-caps text.

text-transform: uppercase;

Create labels or overlines without changing source text.

Color + Effects

color: hsl(20 80% 55%);

HSL is quick for tweaking hue, saturation, and lightness.

background: linear-gradient(135deg, #1a1a1a, #2c1810);

Add depth without heavy imagery.

box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);

Lift cards and floating controls.

border-radius: 16px;

Soften UI surfaces and match your token scale.

Responsive + States

@media (max-width: 768px) { ... }

Adjust layout for tablet and mobile widths.

:hover, :focus-visible

Provide clear interaction and keyboard focus states.

@supports (display: grid) { ... }

Progressively enhance when a feature is supported.

@media (prefers-reduced-motion: reduce) { ... }

Respect users who opt out of heavy motion.

Motion

transition: transform 0.2s ease, opacity 0.2s ease;

Smooth hover and focus feedback.

animation: fade-in 0.5s ease;

Introduce elements without abrupt jumps.

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

Define reusable motion patterns.

Debugging Layouts

.debug * { outline: 1px solid rgba(255, 0, 0, 0.3); }

Visualize layout bounds quickly.

overflow: hidden | auto;

Diagnose overflow and scrolling issues.

outline: 2px dashed #ffab40;

Highlight a component without changing layout.

Need another reference? Visit the Cheatsheets index or open Accessibility and Design Handoff.