What is a fluid layout in CSS?

Creating fluid layouts involves defining sizes using relative units moderately fixed ones like pixels. It allows the design to grow and shrink proportionally with the screen size. While fixed layouts  overflow on smaller viewports requiring horizontal scrolling, fluid layouts automatically shrink to fit. Purely fluid layouts are less common for entire pages due to complexity and are combined with responsive or adaptive techniques.

Fluid layouts are important for responsive design as they allow the page to “flex” smoothly between the “breakpoints” where media queries introduce more important layout changes. This makes the design look good on various viewport sizes, not just specific ones targeted by media queries.

Relative units used in fluid layouts:

Percentages (%):

 Sizes are defined as a percentage of the parent container’s size. This is a common way to create proportional columns or widths.

To convert a fixed pixel value to a percentage relative to its container, you can use the formula: target / context = result. Divide the desired size (target) by the size of its container (context). The result, shifted two decimal places to the right, is the percentage.

Example:

If you have an element that is 200px wide inside a container that is 960px wide, the percentage would be (200 / 960) * 100 = 20.83%.

Code Example (based on converting fixed to fluid percentages):

/* Assume the container is 960px wide initially */
/* Using the formula: 200px / 960px = 0.208333... */
.left-sidebar {
  width: 20.8333333%; /* Percentage based on the formula */
  /* ... other styles */
}
/* Example using percentages for columns in a layout */
.main-content {
  width: 66.67%; /* Example percentage */
}
.sidebar {
  width: 33.33%; /* Example percentage */
}
/* Example using max-width as percentage for a container */
.container {
    max-width: 96%; /* Container is 96% of the viewport, with some margin */
    margin: 0 auto; /* Centers the container */
    /* ... */
}

Fluid grid systems, like the Fluid 960 grid, utilize percentages for column widths.

Viewport Units (vw, vh):

vw (viewport width) is relative to 1% of the viewport width.

vh (viewport height) is relative to 1% of the viewport height.

Code Example:

div {
  width: 20vw; /* Takes up 20% of the viewport width */
  height: 20vh; /* Takes up 20% of the viewport height */
} /* */

Font-Relative Units (em, rem):

1. em is relative to the font size of the parent element. This can lead to compounding effects in nested elements.
2. rem (root em) is relative to the font size of the root element (html). This provides more consistent scaling for typography and for padding/margins based on font size.
3. These are commonly used for typography but can also be applied to spacing or element sizes.

Fractional Unit (fr):

 Used in CSS Grid Layout. It represents a portion of the available free space in the grid container.

• The fr unit is powerful when combined with functions like repeat(), minmax(), auto-fill, and auto-fit to create flexible and responsive grid tracks that adapt to available space.
• minmax(min(200px, 100%), 1fr) is an example of a size definition ensuring a minimum size while allowing the track to grow to fill available space.

Code Examples (using fr in Grid):

/* Creates a grid with columns that are at least 300px wide, */
/* but grow proportionally to fill the container */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* */
/* Another example with a more complex minmax function */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); /* */
/* Defining grid columns with percentages and fr */
div {
    grid-columns: 20% 60% 1fr; /* First column 20%, second 60%, third fills remaining space */
}
/* Image gallery example using minmax and fr */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* */
  gap: 16px; /* */
}

Grid layouts using auto-fit or auto-fill with minmax can create layouts that add or remove columns based on the available viewport size without needing media queries for that specific behavior.

Fluid layouts using  relative units are often used in conjunction with media queries. The fluidity handles the continuous scaling, while media queries are applied at specific points (“breakpoints”) to make more important layout adjustments that proportional scaling alone can’t achieve. This combination allows for adapting the presentation to different screen sizes and conditions.

Code Example (combining fluid layout with a media query):

/* Default styles (e.g., for smaller screens - Mobile First approach) */
.container {
  display: block; /* Elements stack by default */
  width: 100%; /* Fluid width */
  padding: 1em; /* Relative padding */
}
.main-content, .sidebar {
  width: 100%; /* Elements take full width */
  margin-bottom: 1em; /* Add space between stacked elements */
}
/* Styles for wider screens using a media query */
@media screen and (min-width: 768px) { /* Breakpoint at 768px */
  .container {
    display: flex; /* Or display: grid; */
    max-width: 96%; /* Container remains fluid but has a max width */
    margin: 0 auto; /* Center the container */
  }
  .main-content {
    width: 70%; /* Proportional width on wider screens */
    margin-right: 2%; /* Space between columns */
    margin-bottom: 0; /* Remove bottom margin when side-by-side */
  }
  .sidebar {
    width: 28%; /* Proportional width on wider screens */
    margin-bottom: 0;
  }

This example shows how a fluid layout (using 100% width and relative padding/margins by default) is modified at a specific breakpoint using a media query to introduce a multi-column structure with proportional (%) widths. Media queries can also be used to alter grid area templates for different screen sizes.

By combining fluid layouts with media queries, developers can create responsive designs that adapt well to a wide range of devices and viewports.

CSS3 Topics