Analysis: Grid System (Made by PFD)

'Made by PFD' is the website of a design agency. Again I have visited the awwwards.com website, this time under the actual Design business category, as you would assume that the sites would be well designed and the majority responsive.

The website is very much (probably not the official term), 'grid based'. This seems like it makes the website more successful as the grids will continue to flow evenly and shift to the next row if need be. I was reading an article on coffeecup.com about the benefits of using Grids in Responsive design which helped me further my understanding of them.

Main points from the article:

• A fluid grid is dependant on the horizontal width of the page it is being displayed on. It will still fill the page with the desired number of rows/columns but their evenly distributed sizes are reliant on the width of the page. It is 'squishable'. 
• Just because a grid is fluid does not mean it is responsive by nature. If you keep reducing the width of the page the grid will keep on squishing. 
• The sizes of fluid grids are not set in stone, and a responsive fluid grid will stack elements before they become unusable (e.g. they get too squished). If the width of a column hits a certain point it will be moved and arranged until it is positioned so that it can be read properly. 

The following image is copied from the article:

Above you can see that instead of squishing the columns onto the one row and continuing to squish them even if they become unreadable as the width of the page decreases, a column has been shifted below.

The Made by PDF website demonstrates this well. You can see the website in the desired form below:

As you reduce the width of the page the descriptive text rolls onto additional lines and the images - the element that is most obviously in a grid layout - start to reduce in size. In order to keep the 2 images on the same row together they start to shrink to compensate.

As you continue to reduce the width of the website, though, there comes a point where it's decided that the images have been made too small for them to be enjoyed and understood properly. So, they are re-stacked to bring them back up to the correct size.