Sign in to track progress and bookmarks.
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.
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.
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."
Quizzes linked to this course—pass to earn certificates.
On this page
1. Flexbox vs Grid 2. Container Queries: The Holy Grail 4. Interview Mastery