Clever Geek Handbook

Responsive mesh grid implementation

I am going to create a responsive web design in a few weeks. I've read a lot about responsive web design and one method is about the grid system. There is a 978 grid system, or a 12-column system, etc. I'm just not sure what it is for and how to implement the files that are already provided on the website. Example for website: http://960.gs/

And can you please explain to me what is the difference between a 24 column grid, a 12 column grid, 16 columns, and many others?

Thanks for the advice.

+3


source to share


1 answer


I am a web front-end developer and although I have developed some layouts, I do not pretend to be an "expert designer" by any means. But I have a lot of experience actually building responsive projects in HTML, CSS3 and Javascript, so where are my comments / comments below:

I also read briefly about system grids, and while they might be useful, I don't really use them - the main idea behind responsive design is to just create layouts that don't require a fixed size, and then combine those with media queries ("snapping state "). For a web page, I usually have 3 layouts: mobile / small, medium and large. Each one can scale around 250px wide (content can dynamically expand within its container, scale images, etc.), and then when you get too big, you "snap" to the next larger layout. For example:

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

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

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

Thus, no column will be smaller than about 250 pixels, and will never be larger than 450 pixels, so each column should be able to stretch by about 200 pixels.



Personally, I would start with something this simple, and then after playing around with it for a bit, then read a little more and maybe try turning on the grid system.

And if you are trying to create front-end in HTML / CSS3, I would just start by using CSS3 flexbox layouts (you can also use "float" with percentages if you want to support IE and older browsers, but this is a little more complicated):

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

+1


source






More articles:


All Articles