What `display: contents` Actually Does in Flexbox and Grid 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.
Practical frontend engineering guides for React, Next.js, TypeScript, and web performance.
Paginated archive. You are viewing page 4.
Total items: 38
Topic Filter
Showing the most-used tags first so the archive stays easy to scan. Click a tag to browse only that topic.
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 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.
Use `min-content`, `max-content`, `fit-content()`, `minmax()`, `clamp()`, and `fr` more intentionally so CSS Grid layouts adapt to real content instead of rigid mockup widths.
Understand how React turns setState into a DOM update through batching, scheduling, the render phase, the commit phase, and effect timing.
Learn when setState appears synchronous or asynchronous in React, why the answer changes across calling contexts, and how React 18 automatic batching changes the behavior.
Understand how Fiber, scheduling/time slicing, lanes, and double buffering work together to make concurrent rendering responsive and consistent.
Understand how React Fiber stores both hooks in the same effect list, why HookLayout and HookPassive tags matter, and when each runs during the commit phase.