Fluid Grids

Fluid Grids, a Break Down

how this all works

Fluid Grids are based upon the idea that with minimal HTML/CSS you can build a site that re-flows automagically. It's about making mobile-friendly and mobile-first designs that need very few position tweaks. If any at all.

target ÷ context = result

It's All About Context

it really is everything

To achieve this, we use the simple formula above. Target width divided by the width of the container which equals the result in ems (relative units) that we want.

ems - The Relative Unit

subjectivity, subjectivity

There are many relative units available to designers. Few are as versatile as the em however. Primarily designed for use with fonts ems can also be used automagically adjusting units for margins and paddings.

Fluid Images

Fluid images are easily made by building a flexible container element and placing an img within it.

The contained img should then have it's values set like this:

img {max-width: 100%}

All of the above images are placed within an element, an <article> in this case, which has its width expressed in relative units (precentages or ems). The <img> element is then set in the stylesheet to have a value of max-width: 100%

Go ahead! Try resizing the browser and seeing what happens.