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 fluid grid layout since it’s easier to handle grid based layouts in different kind of devices.

What is a Fluid Grid Layout?

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

View the 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.

View the 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 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.

View the 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 the Source Files

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.

Editorial Team

Written by Editorial Team

  • Eadnepa

    Nice post mate!!clear explanation…Thanks for your article…

  • 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.

    • 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.

  • Estiaq Ahmad Lemon

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

    • Hi Estiaq

      Thank you very much.

      I am planning to provide similar tutorials in future with more improvements. :)

  • 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

    • 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.

  • 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 :)

    • 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.

  • Azhar Khan

    Isn’t Twitter Bootstrap and Foundation Zurb very similar..??

    • 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.

  • Azhar Khan

    Thanks For This Tutorial.
    I am using Bootstrap since 3 months. It’s Brilliant. Bootstrap Helped me a Lot.
    My Latest website with bootstrap. The Red’s Group

    • Hi Azhar

      You are welcome.

      Bootstrap is my favourite too. What would you like to see in 1stWebdesigner in the future tutorials?

      • Azhar Khan

        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.

  • Really interesting article… Very well explained as well… Thanks!

    • Hello
      Thank you very much for your interest in my article. I hope you will stay with 1stwebdesigner to experiece more quality articles on web design.

  • 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 ..

    • 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

  • Hriday Das

    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.

    • 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.

  • prowebguru

    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 ?

    • 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

      • prowebguru

        Thank you for your valuable inputs.
        I will try separating all sections and if I find any difficulty I will contact you.
        Thanks.

        • Sure. Let me know if you have any difficulties .

          thank you.

  • nitaran tarrah

    i used your article so much, you made me thinking about my methods thank you

    • Rakhitha Nimesh

      Hello Netran

      Thanks for your interest in my tutorial. Feel free to share your methods also.

  • Rachel

    Great article, very helpful. We’re using bootstrap too.

    • Rakhitha Nimesh

      Hello Rachel

      Great to hear. Can we know why did you select bootstrap instead of other frameworks ?

      Thank you.

  • saif

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

    • Rakhitha Nimesh

      Hello Saif

      Let us know your experiences in responsive design once you create your new website.

      Thanks

  • Ludwig Königsberger

    Great read into fluid grids and also a great tutorial for starting into rwd!!

    • Hello Ludwig
      Your website seems to be responsive as well. Hope you share your experiences on RWD with us.

      Thanks

  • Nice read! i have converted my site to responsive => Designzzz its not really that good, but yeah good for my first time :p

    • Rakhitha Nimesh

      Hello Ayaz

      Your site looks cool. Just need few adjustments maybe to the tablet size screens and your site will function as fully responsive one.

      Thanks for sharing your experiences.

      • Yes Rakhitha, yes you are correct it still needs adjustments, and thanks for appreciating :}

        • Rakhitha Nimesh

          Hello Ayaz

          Hope you will come back and share your experiences once you make the site fully responsive. :)

  • 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!

    • hi Logopearl

      Thank you very much for your interest in my tutorial.

  • Great tutorial. I have been trying to make most of my new projects responsive. I converted My Blog to a responsive design a few months ago.

    • Rakhitha Nimesh

      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.

  • Solutis

    Hello, thank you so muche for this code. It’s very useful for my new website. Enjoy Responsive Web Design !

    • Rakhitha Nimesh

      Hi Solutis

      Looks like you love responsive design as well. what is your new website ?

      Is it responsive ?

      Let us know.
      Thanks for your interest.

  • 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.

    • Rakhitha Nimesh

      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

  • webinfobd

    I would like to give you thanks. I hope this will be very helpful for every web developer. Nice and helpful post.

    • Rakhitha Nimesh

      Hi webinfobd

      Thanks for the interest in my article.

  • Antonio Rodrigues

    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 ;-)

    • 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.

  • Kimmy | Zerotheme.com

    Thanks for great article ! I’m using Sketeton framework for html5 templates.

    • 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

  • Dileep Dharma

    Brilliant way to explain things.
    Thanks for all the details.
    Dileep

  • Victor Valencia

    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!

    • 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.

  • Chameron

    I use Bootstrap framework for my first responsive Joomla Template.

    Very useful and save a lot of time for developers.

    Recommend to use it. You can check my templates

    Thanks !

    • 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.

  • Ashlee

    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.

    • 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

        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.