Practical frontend engineering guides for React, Next.js, TypeScript, and web performance.
11 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-layout11Learn 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.
Understand what Flexbox is actually good at, how its axes work, and how alignment properties distribute space so your layouts stop feeling magical.
Use Flexbox to build the layout patterns developers actually ship, from centered heroes and equal-height cards to sticky footers and split panes.
Follow the Flexbox sizing algorithm step by step so you can predict how free space, negative space, and min-size clamping affect each item.
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.
Design layouts that survive both left-to-right and right-to-left interfaces by relying on logical properties, writing direction awareness, and a short list of common bug checks.
Learn how web layout moved from tables and floats to Flexbox, Grid, logical properties, and content-driven sizing so you can choose the right layout model faster.