Fluid Grids

What is a Fluid Grid Layout Anyway?

Often compared to fluid substances in nature, fluid grids conform to their containing elements adapting to their environment. This means that despite the size of the user's screen, the content will be able to adjust automatically. This is beneficial to the developer because limited adjustments are needed for various screen sizes, unlike with fixed-width layouts.

First, you define a maximum layout size, and the specific number of columns you would like divide your grid in (this helps to keep the layout clean and easy to handle). Columns take up a certain percentage of the screen that will adjust proportionally with the screen size. Elements are assigned within those columns (or parent containers) that will adjust to those proportions.

Remind me of What Fixed Width Layouts are...

Fixed width layouts are defined with pixels. You have to manually resize each and every element’s size in media queries to make them proportional in the browser since they do not "respond" to the browser. Without the media queries, the elements stay a consistent size regardless of the screen.

Which Layout is Right for me?

It depends. As with everything, there are positives and negatives to both layouts...

Why a Fluid Grid is Great

• It can be more user-friendly, since it adjusts to literally every screen width
• When done right, there won't be undesriable horizontal scroll bars in some screen sizes.
• It can be easier by defining one width that will continually adjust proportionally
• Responsive wesbites are considered best practice in modern web design. Otherwise, sites can look clunky with noticeable media queries

That being said, some developers stray away from fluid grids because they can be more complicated. This can become problematic if the person doing the maintainence has little experience.

Why you May Want to Use a Fixed Width Layout

• They are much easier to use so it may be good to start a beginner off on
• They allow us more control over how the page will look in most situations. This is because fixed widths allow you to position items on your page and have it look exactly the same whether it is displayed in a huge or small window.
• There is less hassle with individual elements once the layout is all set

Ultimatetly (especially with the expansive mobile market) websites should be made with multiple screen sizes in mind, leaving responsive fluid grids as the best option for the user experience.

Ok Fixed Layouts Suck... What Units do I Use to Make Fluid Grids?

EMs (em)

EMs are scalable units, their size being relative to the document font size. For example, if the document font size is set to 12px, then 1em will equal 12px. This means that 0.5em = 6px or 2em = 24px. Why should you care? If you want to change all fonts on the page (proportionally), all you have to do is change the document size and they all get bigger or smaller together.

Percent (%)

Percentages are pretty similar to ems with the advantage of their size being a percent of their container (unlike ems). They are scalable units.

You can use the formula target ÷ context = result to convert your pixel-defined widths into percentages. For example, lets say you would like your image to be 500px wide inside of your 750px container. To find out what percentage that is, you would simply divide the target (the 500px image) by the container (750px) which would derive the resulting percentage. 500 ÷ 750 = 0.6666 or 66.66%

That's Cool... Now What?

Check it out yourself! Switch back and forth between pixels and percentages to see how it works.