How Fluid Grids Work in Responsive Web Design

Responsive design is the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size. Most designers will choose a grid based layout since it’s easier to handle grid based layouts in different kind of devices.

It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial we are going to focus on fluid grids and their importance in responsive design.

What is a Fluid Grid?

It’s important to know the meaning of fluid grids before we start thinking about the designs. There is no better explanation than the definition given by Wikipedia on fluid.

A fluid is a substance that continually deforms (flows) under an applied shear stress – Wikipedia

So I’ll make things clear by explaining the above definition in simple practical terms. In web design, fluid will be our design or layout and shear stress will be the screen size or user device. Regardless of what the device or screen size is, components in fluid designs are going to flow and adapt to the user environment.

Importance of Fluid Grids

In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.

Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.

How Fluid Grids Work

We used to design inside fixed grids with the 960px system. Then the layout became adaptive by using different pixel sizes at different screen sizes. It was all about pixel based layout design. Now the time has come to create percentage based designs which are known as fluid designs.

In fluid grids we define a maximum layout size for the design. The grid is divided into a specific number of columns to keep the layout clean and easy to handle. Then we design each element with proportional widths and heights instead of pixel based dimensions. So whenever the device or screen size is changed, elements will adjust their widths and heights by the specified proportions to its parent container.

Before we dig deeper into fluid grids, let’s take a look at some cool fluid designs to get an idea about how fluid layouts work.

Dusty Cartridge

Palantir.net

Dress Responsively

Fluid Grid Systems and Generators

Creating a fluid grid from scratch is not an easy task and will require time and effort. Hence it’s wise to choose an existing CSS Grid Framework or Grid Generator as the base for your layout design. The following are some free CSS grid systems and generators.

Most of the CSS grid frameworks will come with advanced built in features and have been tested across many browsers. The purpose of this tutorial is to understand fluid grids from top to bottom. Hence it’s wise to generate a fluid grid which will enable you to learn the basics of fluid grids.

I will be using the  Variable Grid System to generate a fluid grid according to our preference. Follow this link and adjust the variable values. I’ll be using the following values.

Column width – 60
Number of columns – 12
Gutter width – 20

Demo

Then download the fluid version of the CSS file. Now open it in your favorite text editor and search for Grid >> 12 Columns. The code below shows the content of Grid >> 12 Columns section.

.container_12 .grid_1 {
    width:6.333%;
}

.container_12 .grid_2 {
    width:14.667%;
}

.container_12 .grid_3 {
    width:23.0%;
}

.container_12 .grid_4 {
    width:31.333%;
}

.container_12 .grid_5 {
    width:39.667%;
}

.container_12 .grid_6 {
    width:48.0%;
}

.container_12 .grid_7 {
    width:56.333%;
}

.container_12 .grid_8 {
    width:64.667%;
}

.container_12 .grid_9 {
    width:73.0%;
}

.container_12 .grid_10 {
    width:81.333%;
}

.container_12 .grid_11 {
    width:89.667%;
}

.container_12 .grid_12 {
    width:98.0%;
}

As you can see container_12 is the main container. Each and every element in our design should be inside a container with the class container_12 . Then percentage based widths are assigned to classes with .grid_1 , .grid_2 … .grid_n. Fluid grids are built using columns that are considered fluid columns. When the screen size is changed, the widths of these columns will adjust proportionally to its parent container.

We have 12 fluid columns in our grid. So let’s take a look at how the columns are stacked up in our layout.

The code for the above section is given below. You can check the downloaded files for more information.


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Fluid Grid with Fluid Columns
       	<link href="style.css" rel="stylesheet" type="text/css" /></pre>
<div class="container_12" id="single-columns">
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
</div>
<div class="container_12" id="double-columns">
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
</div>
<pre>

Each set of components is contained within an element with the class container_12. Inside the container we can use the grid_n class to create fluid columns with specific widths. Using grid_1 will give 1/12 width of the original grid and grid_2 will give you 2/12.

You can load the demo and resize your browser to view the fluid nature of grid columns.

Nested Fluid Columns

When you have a CSS framework, creating a grid with fluid columns is straightforward. But not all designs are going to be straightforward like the layout shown previously. We might need to create columns and rows inside other columns and rows. Columns contained within a parent column are called nested columns. Let’s see how we can create nested fluid columns using the CSS file we generated earlier.

Demo

The layout given above contains 2 rows. The first row is divided into 2 sections of 6 columns and each of the 2 sections are divided again into 4 sections of 3 columns.

Likewise the second row is divided into 3 sections of 4 columns and each of the 3 sections is divided again into 3 sections of 4 columns. This is how you create nested columns in grids. Let’s see how to code the above layout.


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Nested Fluid Columns
       	<link href="style.css" rel="stylesheet" type="text/css" /></pre>
<div class="container_12">
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
</div>
<div class="container_12">
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
</div>
<pre>

First we create the main containers and columns as we did in the previous section. Inside the column we need to create another container with container_12 class for nested columns. Now we get another 12 columns inside the main 6 columns. Then 12 sub columns can be divided as necessary. Now you should have a clear knowledge of creating fluid grids and working with nested columns. Let’s move further in fluid grids.

Design Beyond Fluid Grid

Most designers that are just starting out think that using a responsive CSS framework will make your design responsive. Unfortunately responsive design is not that simple. Fluid grids will adapt to the change in browser window or device. Unless you plan the design carefully , users will have problems browsing your content on smaller devices when you use fluid grids.

Consider the screen below.

This is how the fluid grid layout discussed in earlier sections will display on small screens. These are just grid columns without proper data. Even in this case the number 1 is not displayed properly. When it comes to real content it’s going to be a total mess. In this scenario we need to adjust the widths of the columns in order to provide better user experience.

You can use CSS media queries to adjust the widths of columns for different screen sizes. In the above scenario you can double the column width and keep 6 columns instead of 12 to provide better readability of your content. So make sure not to depend only on fluid grids in responsive designs.

Testing Fluid Grids

Now that we have completed the basics of fluid grids, we can move onto creating a simple demo with jQuery to test the fluid grid for different screen sizes. First we are going to create the page layout and navigation as shown below.

Demo


<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Fluid Grid Tester

</pre>
<div id="device_navigation">
<div id="device_panel"><a onclick="changeGrid('desktop');" href="javascript:void(0);">Desktop</a>
 <a onclick="changeGrid('tab_lan');" href="javascript:void(0);">Tablet Landscape</a>
 <a onclick="changeGrid('tab_pot');" href="javascript:void(0);">Tablet Portrait</a>
 <a onclick="changeGrid('mob_lan');" href="javascript:void(0);">Mobile Landscape</a>
 <a onclick="changeGrid('mob_pot');" href="javascript:void(0);">Mobile Portrait</a></div>
<div style="clear: both;"></div>
</div>
<div class="main_wrapper"><iframe src="media_query.html" height="240" width="320"></iframe></div>
<pre>

Our testing page has basic HTML layout with jQuery. Element with the ID device_panel will contain the navigation for standard devices like desktops,mobiles and tablets. Once the link is clicked changeGrid function will be called with the type device as parameter.

On the bottom section we have an IFRAME which will be used to load our fluid grid. Fluid grid is contained in the media_query.html file. Now let’s take a look at the changeGrid function.


function changeGrid(device){
               if(device == "desktop"){
                   $(".wrapper").css("width","960px");
               }
               if(device == "tab_lan"){
                   $(".wrapper").css("width","768px");
               }
               if(device == "tab_pot"){
                   $(".wrapper").css("width","600px");
               }
               if(device == "mob_lan"){
                   $(".wrapper").css("width","480px");
               }
               if(device == "mob_pot"){
                   $(".wrapper").css("width","320px");
               }
           }

Once the function is called, it will check for the device using the passed parameter. Then it will change the width of the .wrapper (IFRAME) to the standard width for the device. Then we will be able to see how a fluid grid works on smaller screens.

Fluid grid used inside media_query.html file will be similar to the examples we discussed in earlier section. You can use the demo files to customize the codes. You should have something like the following screen as the testing screen.

Download

Wrap Up

Fluid grids allow you to create responsive designs which suit dynamic screen sizes. The complexity of developing a fluid grid can be minimized by using an existing CSS framework. You cannot depend only on fluid grids to provide the perfect responsive design for you. Adjust the fluid grid when necessary according to your design and try to provide the best browsing experience for the user. Hope you learned something from this tutorial and I’d like to hear your suggestions.

If you want to learn more about how to:

  • Create presentations inside the infinite canvas of modern web browsers
  • Build presentations that work anywhere, any time, and on any device
  • Build dynamic presentations with rotation, scaling, transforms, and 3D effects

You should consider reading Rakhitha Nimesh book “Building Impressive Presentations with impress.js”

Rakhitha Nimesh

Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on WordPress Web Application Development. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter and Google+

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. says

    A topic near to my heart thanks, please consider a follow up post. good day! I like your posts. I hope that you will update more articles…More power.. Thank you for the great site … full of useful information.

    • says

      Hello

      Thank you very much for your comment.

      I am glad that you liked my article and we are planning on better quality articles this year to teach beginners in web design. So stay tuned by subscribing to 1stWD.

  2. Estiaq Ahmad Lemon says

    Thanks Rakhitha Nimesh, I learn many things from here and i hope in future you will keep this thing going on….
    Estiaq Ahmad Lemon

  3. says

    Great ARTICLE Rakhitha Nimesh…It must have taken you time, experience and research to come up with this. The step by step layout optimization is well articulated.

    Thank you so much for your time.

    Kind regards,
    Peter

    • says

      Hello Peter

      Thank you very much for your interest in my article.

      In 1stwebdesigner we are always focused on providing fresh content with lots of research and experience.

      Please let us know how I can improve my explanation process? What’s missing? etc..

      Also let us know what you like to see on 1stwebdesigner in the future articles.

  4. says

    Thanks for a brilliant share Nimesh. Responsive web design is the hottest topic being discussed everywhere. and I badly need to learn this art very quickly :)

    • says

      Hi Shoaib

      Thanks for liking my tutorial. I hope you learned something about responsive design.
      Let us know what you are finding difficult to learn so that we can help you through future tutorials.

    • says

      Hi Azhar

      I think they will be similar in nature for general purposes. But you may find each of them contains different components and features for advanced use.

      • says

        My Age is 17 now and i am a website designer and developer now.
        I know php,mysql,html,css,html5,css3 and wordpress.

        I would like to see Ajajx And jQuery Tutorials in 1stwebdesigner future tutorials.

        I Created a new blog after reading “Every Website Designer Have a Blog” article on 1stWD.
        Could you suggest how I could improve my blogging skills.

  5. says

    That was really awesome, full guidelines step by step to optimize layout from fixed width to fluid. I just was wondering if this could be helpful for me as I’ve also fixed width template.
    Great tutorial ..

    • says

      Hello Imran

      I am glad you liked my tutorial. You should definitely consider converting your fixed layout to a fluid layout to make it compatible with mobile device.

      Let me know if you have any questions.

      Thank you

  6. Hriday Das says

    This tutorial is awesome. Many responsive web design frameworks are available now which can be used to create fantastic responsive websites. A framework I have used recently is Skeleton Boilerplate. This is framework is quite helpful in this trend. There are also many good books available to start designing responsive web design. I just bought a book on Responsive Web Design from http://www.1stwebdesigner.com here http://bit.ly/TD08mW . They have demonstrated each step and technique with fantastic examples. I think the book is worth the price.Thanks.

    • says

      Hello Hriday

      Thank you very much for liking my article.

      Skeleton is my favorite too. Its simple and effective. Do you have any tips or difficulties you faced with creating the responsive layouts with skeleton ?

      1stwebdesigner is the best. Responsive design book is a very good guide to start from scratch. Hope you follow 1stwebdesigner with the upcoming awesome tutorials and books in future.

  7. says

    While creating a new website, these samples are very useful and handlyl.
    Now a days having a responsive web design is very important. any tips on how to modify existing websites ?

    • says

      Hello Prowebguru

      Thank you for the interest in my tutorial.

      Responsive design works on column based designs. In my example 12 columns are used. So we have to try to separate exiting designs into column based model first.

      Then have to separate each section(row) like header,footer,navigation, etc… If everything goes well, we can apply a responsive framework easily to the separated sections.

      Finally we can adjust the deign using media queries for different screen sizes.

      Even though it sounds simple, modifying existing website is very tough process.

      Let me know if you have further concerns.

      Thanks

  8. saif says

    It’s very useful for my new website. Thank you so much for this code. Thanks You Very Much..

  9. says

    Nimesh I really loved the way you outlined all the important factors of a fluid grid responsive designing in such a briefly illustrated article. Never knew that it would be more effective than traditional methods. I m certain that others will learn quite a lot from this well-informed material. Thanks for your efforts!

    • says

      Hello Joey

      I checked your blog and it looks awesome. Good example for Responsive Design.

      Why don’t you share some of the things you learned and issues faced making it responsive.

      Thanks for sharing your thoughts.

  10. says

    Responsive web design is defiantly the future of web design. I think in a couple of years from now every major website will be built using responsive web design.

    • says

      Hello Dave

      Definitely its going to be a major factor in web design . Already lots of site are redesigning and restructuring to adapt to mobile devices.
      So are you a web designer ? Do you have working experience in responsive design ?

      Thanks for sharing your thoughts

  11. Antonio Rodrigues says

    Foundation by Zurb is my favorite prototyping system, and very helpful when building fluid grid based responsive layouts. Robust yet very easy to get started, with online docs & examples clear and simple. Currently working on two projects, Foundation based ;-)

    • says

      Hi Antonio

      Thanks for sharing your thoughts.

      I havent used Zurb yet.But lot of people who have already worked with the frameworok are quite happy with everything it provides.Can you share the new things you learn and difficulties faced througuout the process regarding responsive design.

      looking forward to hear from you.

    • says

      Hi Kimmy

      Skeleton is one of my favorites too. Recently I had the chance to work with skeleton WordPress theme and it looks awesome.

      Thanks for sharing your thoughts

  12. Victor Valencia says

    I have worked with bootstrap and I feel very good, this is very good article especially now that the mobile trend becomes increasingly strong, thanks for sharing Excelent Article!

    • says

      Hi Victor

      Bootstrap seems one of the popular among web designers. Thanks for sharing your thoughts and let us know any problems you faced or things learn throughout your project.

    • says

      Hi Chameron

      Thanks for your suggestions.

      I have worked with Bootstrap in WordPress and it is very easy to handle with the other features it provides. You mentioned that you have used it on joomla. So Bootsrap will be compatible with other popular frameworks as well. Feel free to share your thoughts on other frameworks if you have previous experience on them as well.

  13. says

    One grid system you left off the list is Zurb Foundation. It’s been my favorite responsive grid system to use because it offers several features beyond the grid itself, such as pre-defined classes for basic styling of buttons, forms, tabs, navigation, and more. It also has some (optional) built-in jQuery features such as a responsive slideshow and modals. It’s a very robust grid and prototyping system.

    • says

      Hi Ashlee

      Thanks for mentioning about Zurb Foundation. It looks like a complete framework for responsive design.

      I haven’t had the chance to work with this framework and hence I didn’t include it in the tutorial. I’ll make sure to follow this framework and see how these features work.

      • GeekGrunge says

        Zurb Foundation it’s an amazing tool, simple an effective :)

        Twitter bootstrap is a great solution but for me it’s more a design pattern collection. There are too many options available for one man.