What is a fluid grid?

Any beginner coder knows that writing media queiries is one of the most annoying and frustrating aspects of responsive design. It essentially requires the designer to develop dozens of layouts, and still not achieve an ideal look uniformy across the thousands of different screen sizes that are available today.

That's where fluid grids come in. Simply put, fluid grids are systems by which websites can scale dynamically based on percentage widths. They work by dividing the screen into different "chunks" (columns) that can are used to house content. Each column can be further divided into columns, effectively allowing the designer to allow the content to flow as the viewport size changes.

Why do they matter?

Fluid grids are about more than just cutting down time on media queries- it's all goes back to the foundations of semantics. By designing using fluid grids, designers can drastically cut down on the amount of markup that goes into their websites. Grid design allows markup to be more easily understandable as well, as it breaks everything into easy-to-understand columns.

Fluid grid designs are, first and foremost, responsive. Because they are designed using percentages, they flow easily from size to size. This means that there are fewer overall designs needed to make a website universal. This is especially important given that mobile devices are drastically different from each other, while the average desktop size continues to increase. Fluit designs allow us to satisfy all of these demands.

Step 1: Decide on your system

First, you'll need to figure out how your grid layout will function. There is no right or wrong answer here, but it helps to consider the content that you plan to put into the site. Some frameworks, like Bootstrap, use a 12 column grid system. That said, you can make your grid divide however you'd like.

As a general rule, having more columns allows for a great degree of specificity than having fewer, as it allows you to work with smaller percentage increments. That said, with relatively simple content, a small grid can work well.

Step 2: Do the math and set up your classes

Here's where things get a little complicated. Depending on the grid system you decided on, your column widths will vary. To over-simplyify, simply divide your total width (100%) by the number of columns to determine the width for each column. For example, a grid system based on four columns would need a class for 25%, 50%, 75%, and 100% screen widths.

That said, it's not quite so simple. You also have to consider margins, padding, etc. when calculating your percentages. If you don't get the math right at this stage, it means that your layout won't function cleanly later on.

Step 3: Design your site

Lastly comes the design! Using the grid columns, lay out content as desired. As you go, make sure that your content is adjusting smoothly across screen sizes. Rather than making jumps, you'll notice that your content simply scales.

As you design, keep in mind that you can easily determine necessary percents using the formula target (the size you want it to be) / context (size of the container = result. Additionally, using "em" can help with scaling font sizes!

Additional Resources

Bootstrap