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 Rakhitha Nimesh is going to focus on fluid grids and their importance in responsive design.

It’s important to know the meaning of fluid grids - A fluid is a substance that continually deforms (flows) under an applied shear stress. In adaptive grids, you define pixel-based dimensions. Hence Rakhitha Nimesh 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 you just can not plan for smaller devices in responsive design. The advantage of fluid grid is that you can adjust the max-width and it will still work on larger screens due to the percentage based calculations.