A fluid is a substance that continually changes its form and shape accordingly when applied under a shear stress.
In terms of web design, fluid refers to our design that we adapt and shear stress refers to the screen resolution according to which the fluid components adjust. Components in fluid designs adapt the environment or the screen resolution and flow accordingly.
For responsive design, we can say that this is a combination of a number of elements in which one is fluid grids and another is the use of media queries to load CSS, depending on the size of the screen along with its types; so we can say that fluid grids are not exactly responsive designs in themselves.
To keep the layout clean and to easily divide the grid into a specific number of columns, the maximum layout size is defined in the fluid grids. Instead of pixel-based dimensions, each element inside the grid is designed with proportional widths and heights so that they adapt according to the parent container. Elements will adjust their width and height according to the container in which they reside whenever the screen size is changed.
As fluid grids flow naturally along with the change in dimensions, we have to perform limited adjustments for different screen sizes and device types. Whereas in case of adaptive grids, we have to define definite pixel-based dimensions and have to manually adjust the height and width of the element in device viewports. In fluid grids, we can adjust max-width, which has great importance, since nowadays mobile devices are more powerful, so a person may spend most of the time performing various tasks using the mobile device itself.
Fluid grids are not easy, and creating them from scratch requires effort and time and is a tedious task. Since most of the grid frameworks come with advanced built-in features and have been tested across various major browsers, it is wise to choose an existing CSS grid framework or a grid generator as the base for our layout creation and designs. Some CSS grid systems and generators that we can use are:
Creating a grid with fluid columns is easy when we have a CSS framework, but all designs are not going to be straightforward. We might need to create columns and rows inside other columns and rows. Nested columns are columns contained within a parent column.
Starting with desktop as the primary focus, 960 grid system, which was designed by Nathan Smith, is quite good if you're looking for a desktop solution. Smith has more recently put in the effort to move the framework so that it adapts to mobile devices also.
This system provides a tool that includes CSS and JavaScript files for handling rapid prototyping and publishing, as well as templates for many popular design environments, such as Omnigraffle, Fireworks, Balsamiq, and Photoshop, in order to provide a single solution for both desktop and mobile devices.
960 grid system's attention to detail has inspired elastic and fluid variations, themes, and a system for adapting to our own CSS preferences. So, we can say that with this, we can set our preferred column number, column width, and gutterwidth—all while enjoying the benefit of the 960 grid system community.
Pros of 960 grid system are as follows:
Cons of 960 grid system are as follows:
Bootstrap is an HTML, CSS, and JavaScript framework that you can use as the base for creating websites or web applications. If you are involved in web development today, you must have heard of Twitter and GitHub, so when you hear of a framework that started life at Twitter and is the most popular repository on GitHub—beating even jQuery and Node.js—you'll gain some idea of the viral spread that has engulfed Bootstrap. In other words, it's a sleek, intuitive, and powerful frontend framework for faster and easier web development.
In short, it represents the drive behind responsive web design to enable developers to quickly release applications that hold the user's needs at the forefront.
As its responsive features are strong enough to stand alone, Bootstrap and its component library is one of the best solutions around. We can exploit the fluid nesting and offsetting that helps to set the framework apart from its peers. And while we will avoid taking advantage of the component styling for which many developers adopt Bootstrap, the ease with which the grid comes to life will make you keen to explore the framework's other features.
Pros of Bootstrap are as follows:
Cons of Bootstrap are as follows:
But using responsive CSS framework does not make our design responsive and moreover responsive design is not that simple. Unless we plan the design carefully, users will always face problems while browsing the content on smaller devices when we use fluid grids.
For perfect responsive design, we cannot depend on fluid grids, but we can adjust the fluid grids when necessary according to the design It user with the best browsing experience.