Fluid Layouts

Definition

Layouts built using relative units (like `%`, `vw`, `fr`) instead of fixed units (`px`), allowing elements to smoothly expand and contract with the browser window.

Explain Like I'm New

Instead of saying 'This box is exactly 500px wide' and hoping the user's screen is bigger than 500px, you say 'This box takes up 50% of the screen'. As the user stretches their browser, the box stretches with it like rubber.

Real World Example

Using CSS Grid with `1fr 2fr`. The layout is fluid because the columns are mathematical fractions, not rigid pixels.

Common Use Cases

•True responsive design
•Handling the infinite variety of Android screen sizes

Interactive Example

Interview Questions

basic

Which unit creates a more fluid layout: `px` or `%`?

intermediate

How do you prevent a fluid layout from stretching too far on a massive 4K monitor?

Flash Cards

Question

px or %?

Click to reveal answer

Answer

`%` (Percentages). It recalculates its size constantly based on the parent container.

Question

Prevent over-stretching?

Click to reveal answer

Answer

Use the `max-width` property. E.g., `width: 100%; max-width: 1200px;`. It will be fully fluid on phones and laptops, but stop stretching once it hits 1200px on a giant TV.