Practical frontend engineering guides for React, Next.js, TypeScript, and web performance.
10 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
css-grid10Learn how CSS Grid defines explicit and implicit tracks, how `fr` space is resolved, and how functions like `repeat()` and `minmax()` make layouts resilient.
Use CSS Grid for the layout patterns Flexbox cannot express cleanly, from app shells and holy grail pages to editorial heroes and layered visual compositions.
Learn when to rely on auto-placement, when to place items by line, and how Grid alignment differs from Flexbox when rows and columns both matter.
Choose between Flexbox and Grid based on axis, placement, source order, and component responsibility instead of repeating the vague one-dimensional versus two-dimensional slogan.
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.
Understand the difference between nested grids and subgrid, why subgrid improves alignment, and where it pays off in cards, forms, timelines, and editorial layouts.
Understand when `display: contents` helps flatten wrappers for layout participation, where it creates tradeoffs, and why it is not a universal replacement for subgrid.
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)`.