Fluid Layouts

Build layouts that stretch and contract smoothly with flexible units and viewport dimensions

Fluid layouts are like water — they adapt to any container size. Unlike fixed layouts that break on different screens, fluid layouts use percentage-based widths and flexible units to create designs that flow naturally across all devices.

Think of a fluid layout like a balloon. When you stretch it, everything inside grows proportionally. The WanderLust team wants their website to look perfect whether someone visits on a phone, tablet, or desktop — without using media queries.

Understanding Fluid vs Fixed

Fixed layouts use pixel values that never change. If you set width: 800px, that element will always be 800 pixels wide — even on a tiny phone screen where it overflows.

Fluid layouts use relative units like percentages, viewport units, and flexible containers. They automatically adjust their size based on the available space.

Percentage-Based Widths

Percentages are the foundation of fluid layouts. When you set width: 50%, the element takes up half of its parent container — no matter how wide that parent is.

/* WanderLust hero section that adapts to any screen */
.hero-container {
  width: 90%; /* Takes 90% of browser width */
  max-width: 1200px; /* Never exceeds 1200px */
  margin: 0 auto; /* Centers the container */
}

.hero-content {
  width: 60%; /* 60% of hero-container */
  float: left;
}

.hero-image {
  width: 35%; /* 35% of hero-container */
  float: right;
}

The Power of max-width

While width: 100% makes elements fully flexible, max-width prevents them from becoming too wide on large screens. This keeps your content readable and visually appealing.

/* WanderLust destination cards that never get too wide */
.destinations-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  padding: 0 5%;
}

.destination-card {
  width: 30%; /* 3 cards per row */
  min-width: 280px; /* Never smaller than 280px */
  max-width: 400px; /* Never larger than 400px */
  margin-bottom: 20px;
}

Viewport Units

Viewport units are super powerful for fluid layouts because they relate directly to the browser window size. Here are the main ones:

Viewport units are perfect for creating full-screen sections that adapt to any device. 100vh always equals the full height of the browser window, making it ideal for hero sections.

/* WanderLust full-screen hero with viewport units */
.hero-section {
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  background: linear-gradient(135deg, #0ea5e9, #f97316);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text {
  font-size: 4vw; /* Font scales with viewport width */
  max-font-size: 3rem; /* Don't get too large */
  text-align: center;
  color: white;
}

Flexible Typography

Fluid layouts need fluid typography. Instead of fixed font sizes, use units that scale smoothly. The clamp() function is perfect for this — it sets a minimum, preferred, and maximum size all in one.

/* WanderLust typography that scales beautifully */
.page-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Min 1.5rem, scales with 4vw, max 3rem */
  line-height: 1.2;
  margin-bottom: 1rem;
}

.destination-description {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  /* Readable on all screens */
  line-height: 1.6;
  max-width: 65ch; /* Optimal reading length */
}

.price-display {
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 700;
  color: #f97316;
}

The 65ch Rule

Notice the max-width: 65ch on text? The ch unit represents the width of the "0" character. 65 characters is the optimal line length for comfortable reading — any longer and your eyes have trouble tracking to the next line.

Fluid Grid Systems

Modern CSS Grid makes fluid layouts incredibly powerful. You can create grids that automatically adjust the number of columns based on available space using auto-fit and minmax().

/* WanderLust photo gallery that adapts column count */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.photo-item {
  aspect-ratio: 4/3; /* Maintains 4:3 ratio */
  background: linear-gradient(45deg, #0ea5e9, #f97316);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

Container Queries (The Future)

Container queries are the next evolution of fluid design. Instead of responding to the viewport size, elements respond to their container size. This creates truly modular components that work anywhere.

/* WanderLust booking card that adapts to its container */
.booking-card {
  container-type: inline-size;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* When the card is narrow (< 400px), stack vertically */
@container (max-width: 400px) {
  .booking-content {
    flex-direction: column;
  }
  
  .booking-image {
    width: 100%;
    height: 200px;
  }
}

/* When the card is wide (≥ 400px), arrange horizontally */
@container (min-width: 400px) {
  .booking-content {
    flex-direction: row;
  }
}

Fluid Layout Best Practices

Creating effective fluid layouts requires balancing flexibility with usability. Here are the key principles that make layouts work across all devices:

Remember that fluid layouts work best when combined with other responsive techniques. Use media queries for major layout changes and fluid units for smooth scaling within those layouts. The WanderLust team combines viewport units, flexible grids, and smart constraints to create layouts that feel natural on every device.

Quiz