How to Create a Responsive Website with Pills.css

pills.css is the simplest CSS responsive grid that allows you to create responsive website.
What does it mean responsive? It means that a web page layout will be automatically changed to fit a viewpoint width and as a result this website could be viewed on any device: PC, tablet, or smartphone.
The pills.css grid layout is based on 12 columns. 12 columns cover 100% of the web page width. You can create a div block with any width from one column to 12 columns.
What you should understand is that when you create a few blocks each less than 12 columns wide, the sum of the width of these blocks must be 12 columns or 100%.
pills.css grid layout.
On the figure on the left, the most outer block is 12 columns. Inside this block, we have 3 blocks: one block is 1/5 of the whole row, one block is 3/5 of the whole row and one block is 1/5 of the whole row. The whole row is 12 columns.
1/5 + 3/5 + 1/5 = 1 or 100% or the whole 12 columns row.
Inside the 3/5 block we have to place 6 small blocks with images.
It is very important to understand that we cannot place these 6 small blocks directly inside the 3/5 block. First, we must place inside that 3/5 block the whole 12 columns block and only then we can place 6 small blocks inside that whole block.
To make each image responsive, we assign its width to 98% of the small block.

You can see demo here:
http://sergeyskudaev.com/images.php

You can download the whole source code for this website from
http://sergeyskudaev.com/responsive_w...

You can download pills.css from: https://github.com/rohitkrai03/pills

You can check if a website is responsive by squeezing browser viewpoint or by viewing the website in http://www.responsinator.com