CODEWITHSUNDEEP
responsive-design
user1069475
user1069475

Reputation:

responsive web design grid system implementation

I'm about to create a responsive web design this few weeks. I've read a lot about responsive web design, and one of the method is about grid system. There are 978 grid system, or 12 column grid system, etc. I'm just not so sure what it is use for, and how to implement with the files which is already provided from the website. Example for the website: http://960.gs/

And could you please explain to me what is the different between 24 column grid, 12 column grid, 16 column grid, and many more?

Thanks for the advice.

Upvotes: 3

Views: 962

Answers (2)

AbdurRahman Lakhani
AbdurRahman Lakhani

Reputation: 11

Through grid system you make website responsive by dividing your website into different columns for different mobile device. Below are few example that may explain you it better

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

for 24 and 16 grid you can divide accordingly.

I hope so that it may help you understand better.

Upvotes: 0

Luke Madera
Luke Madera

Reputation: 11667

I'm a front end web developer and while I've designed some layouts, I don't claim to be an "expert designer" by any means. But I do have lots of experience actually building responsive designs in HTML, CSS3 and Javascript so that's where my experience/comments below stem from:

I've briefly read the grid systems too and while they can be useful, I don't really use them - the basic idea behind responsive design is to just build layouts that don't require a fixed size and then combine that with media queries ("snap states"). For a web page I typically have 3 layouts: a mobile/small version, medium, and large. Each one can scale about 250px in width (content can dynamically expand within its container, images scale up, etc.) and then when you get too big you "snap" to the next bigger layout. For example:

  • small layout: 250px to 450px (1 column)

  • medium layout: 450px to 800px (2 columns)

  • large layout: 800px to 1300px (3 columns)

That way no column ever is less than about 250px and never is bigger than 450px so each column has to be able to stretch about 200px.

Personally I'd just start with something simple like that and then after you've played around with it some, then read some more and maybe try incorporating the grid system.

And if you're trying to actually build the front end in HTML/CSS3, I'd just start by using CSS3 flexbox layouts (you can also use "float" with percentages if you want to support IE and older browsers but it's a little more difficult):

http://www.html5rocks.com/en/tutorials/flexbox/quick/

Upvotes: 1

Related Questions