copy-responsive_web_design-570x345.png

Responsive Web Design Grids without frameworks

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *