Fluid Layouts

Fluid Layouts

Media queries let you change layouts at specific breakpoints, but a truly responsive site also needs to be fluid between those breakpoints. Fluid layouts use relative units (percentages, em, rem, vw) instead of fixed pixels so elements stretch and shrink smoothly.

Fixed vs Fluid

Fixed Layout	Fluid Layout
width: 960px;	max-width: 1100px; width: 90%;
Doesn't adapt between breakpoints	Stretches and shrinks smoothly
May require horizontal scrolling	Always fits the viewport

The Fluid Container

Every responsive site needs a container that limits the maximum width and centers the content:

.container {
    max-width: 1100px;
    width: 90%;
    margin: 0 auto;
}

• max-width prevents the content from stretching too wide on large screens
• width: 90% makes it take 90% of the viewport on smaller screens
• margin: 0 auto centers the container horizontally

Converting Pixels to Percentages

The classic formula from Ethan Marcotte:

target ÷ context = result

Example: A sidebar is 300px inside a 960px container:

300 ÷ 960 = 0.3125 → 31.25%

.sidebar { width: 31.25%; }
.main    { width: 68.75%; }  /* 660 ÷ 960 */

Fluid Layouts with Flexbox

Flexbox makes fluid layouts much simpler — no calculations needed:

.row {
    display: flex;
    gap: 20px;
}

/* Two columns: sidebar (1 part) and main (2 parts) */
.sidebar { flex: 1; }
.main    { flex: 2; }

/* Three equal columns */
.col { flex: 1; }

The flex property distributes available space proportionally. flex: 2 gets twice the space of flex: 1.

Fluid Layouts with CSS Grid

CSS Grid offers even more powerful fluid layouts:

/* Fixed column count */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Auto-responsive: columns adjust automatically */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

The auto-fit + minmax() pattern is incredibly powerful — it creates a responsive grid without any media queries:

• Each column is at least 280px wide
• Columns expand to fill available space with 1fr
• When the viewport narrows, columns automatically wrap to fewer columns

Fluid Typography

Font sizes can also be fluid using the clamp() function:

h1 {
    /* Minimum 24px, preferred 5vw, maximum 64px */
    font-size: clamp(24px, 5vw, 64px);
}

p {
    font-size: clamp(14px, 1.5vw, 18px);
}

clamp(min, preferred, max) creates smoothly scaling text that stays within readable limits.

Relative Units Reference

Unit	Relative To	Use Case
%	Parent element's size	Widths, padding, margins
em	Parent's font size	Spacing that scales with text
rem	Root (html) font size	Consistent sizing across components
vw	1% of viewport width	Full-width elements, fluid text
vh	1% of viewport height	Full-height sections
fr	Fraction of available space (Grid)	Grid column/row sizing

Fluid Images

Images must also be fluid to avoid overflowing their containers:

img {
    max-width: 100%;
    height: auto;
}

/* For videos and iframes (embedded content) */
.video-container {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 aspect ratio */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Putting It All Together

/* Fluid container */
.container { max-width: 1100px; width: 90%; margin: 0 auto; }

/* Fluid grid with auto-responsive columns */
.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Fluid images */
img { max-width: 100%; height: auto; }

/* Fluid typography */
h1 { font-size: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(22px, 3vw, 36px); }
p  { font-size: clamp(14px, 1.2vw, 18px); }

Key Takeaways

• Fluid layouts use relative units (%, em, rem, vw, fr) instead of fixed pixels
• The .container pattern with max-width + width: 90% is the foundation
• Flexbox's flex property distributes space proportionally
• CSS Grid's auto-fit + minmax() creates responsive grids without media queries
• clamp() creates fluid typography with safe minimum and maximum limits
• Always set img { max-width: 100%; height: auto; } for responsive images