Practical frontend engineering guides for React, Next.js, TypeScript, and web performance.
7 items under this tag.
Topic Filter
Showing the most-used tags first so the archive stays easy to scan. Click a tag to browse only that topic.
Current tag
layout-strategy7Choose between Flexbox and Grid based on axis, placement, source order, and component responsibility instead of repeating the vague one-dimensional versus two-dimensional slogan.
Learn how semantic HTML, the visual formatting model, and layout intent help you choose between `block`, `inline`, `flex`, `inline-flex`, `grid`, and `inline-grid` without extra CSS hacks.
Use `min-height: 0`, inner scroll wrappers, auto margins, non-stretch alignment, and `flex-shrink: 0` to prevent broken scrolling and distorted UI in Flexbox and Grid.
Use `flex-wrap`, content-aware Flexbox sizing, and Grid RAM patterns with `repeat(auto-fit, minmax())` to prevent broken layouts and horizontal overflow.
Learn how to choose `margin`, `padding`, or `gap` for component spacing, optional icons, horizontal scrollers, and dynamic content without brittle CSS hacks.
Learn how automatic minimum size and `min-content` cause `flex: 1`, `1fr`, long words, and scrollable components to overflow, and when to use `min-width: 0`, `overflow: hidden`, or `minmax(0, 1fr)`.
Learn why `position: sticky` fails when thresholds are missing, ancestors use overflow, or Flexbox and Grid stretch the sticky item so it has nowhere to travel.