Understanding and Creating Responsive and Fluid Grid Layouts

After learning about advanced grid structures and concepts and how to align individual elements, or even the entire grid content, the next concept to conquer is responsiveness. Since the invention of smartphones (and no, we do not mean the 1994 IBM Simon, which predates the first CSS release by a full 2 years!), more screen sizes have emerged.

I remember when specific versions of websites were developed for smartphones and even tablets once those started to become a thing. I remember some apps even having specific domains for their mobile versions. Nowadays, we use the same website for all devices and let CSS make the adjustments for us.

And let’s also be thankful that the times of Wireless Application Protocol (WAP), used to transfer web content to cellphones such as the Nokia 6310 from 2001, are over…

In detail, this chapter covers the following topics:

• Understanding the challenges we could...