Responsive Web Grids
This is a short compendium of RWD Grids, I want to thanks to Nick Salloum (sitepoint) how started with this.
Now I want to take that and continue including new ways to implement it. So that can give us quickly an idea about the grid approach we need to follow if we are planning to go Responsive. If you are planning to create a simple grid that can fluid and adapt on different environments may be you can find these grids interesting and a good skeleton for your project.
Responsive CSS Grid Layout Version 1: Using negative Margins
use of negative margins to create CSS grid blocks with a fixed margin in between each block. The negative margin varies depending on the position of the grid block, and the margin in between grid blocks remains fixed.
LINK
Responsive CSS Grid Layout Version 2: Using box-sizing: border-box and negative margins
This method makes use of negative margins to create CSS grid blocks with a fixed margin in between each block. The negative margin varies depending on the position of the grid block, and the margin in between grid blocks remains fixed.
LINK
Responsive CSS Grid Layout Version 3: Using Table Display
This method implements the age-old table functionality, but without breaking our semantics or structure. In this method, the visible elements are block-level by default. But at a certain breakpoint, grid rows become tables and columns become table cells.
LINK
Responsive CSS Grid Layout Version 4: Using Flexbox
Flexbox presents us with a host of different features that give us a powerful layout options. Making a flexbox module responsive is an absolute breeze. But there are some problem on legacy devices and old & new flexbox CSS.
LINK
Responsive CSS Grid Layout Version 5: Using position relative and float left
Probably the most reliable version. Setting up the main container and within all the elements naturally will float left and top. They will automatically adjust to the father container. Also breaking point will be use to determinate the number of columns in it
LINK
Source:
Demos borrowed from Nick Salloum. See article.