Modern Layout Engineering

CSS is no longer about centering a div. It is about building responsive, fluid, and robust layouts using Layout Engines. We have moved from Page-based media queries to Component-based container queries.

1. Flexbox vs Grid

• Flexbox: One-dimensional (Row OR Column). Best for alignment and distribution of space between items in an interface.
• CSS Grid: Two-dimensional (Rows AND Columns). Best for the overall page structure and complex gallery layouts.

2. Container Queries: The Holy Grail

Media queries look at the **Browser Width**. Container queries look at the **Parent Component Width**. This means you can build a 'Card' component that automatically switches from horizontal to vertical layout depending on whether it is placed in a wide sidebar or a narrow main column. This is true component encapsulation.

4. Interview Mastery

Q: "What is 'Layout Thrashing' and how do you prevent it?"

Architect Answer: "Layout Thrashing occurs when JS repeatedly reads and then writes to the DOM in a way that forces the browser to recalculate the layout (reflow) multiple times per frame. To prevent it, always **Batch your reads** (e.g., get all heights first) and then **Batch your writes**. Modern frameworks do this automatically, but in vanilla JS or custom component logic, you should use `requestAnimationFrame` to synchronize your updates with the browser's refresh rate."