Lessframework column grid

Question

I'm trying to figure out how to use lessframework to build a 2 - 3 column grid, but how to get started?

In the CSS code, it says:

13-column layout 60 pixels, stacks 24 px, margins 72 px, total 1212 pixels (extra space for scroll bars)

In http://lessframework.com/ it says that for older browsers used 8 columns and 13 for desktop computers ... so I add a lattice columns inside the @ media screen and (min-width: 1212px) media query (or add it to another css file).

I tried to find some examples, but have not yet found anything of value.

UPDATE:

After reading David Oliver's answer, I will try to answer the question:

• 320: 1 col
• 480: 1 col
• 768: 2 col
• 1280: 3 col

Hope this answers the question.

Answer 1

, , , CSS- , CSS, , CSS . CSS, div, CSS .

, , , -, 768 . , : . . ( Apple)

, - :

// Stylesheet to set base styles for all browsers - mobile-friendly:
<link rel="stylesheet" type="text/css" href="css/base.css" />

// Stylesheet to set additional styles including background images not suitable for mobiles and the multi-column layout for browsers being used at viewports of 700px (allows for scrollbar at within 768) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only all and (min-device-width: 700px)" />  

// Stylesheet to set multi-column layout for browsers being used at viewports of 1200px (allows for scrollbar at within 1280) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop-wide.css" media="only all and (min-device-width: 1200px)" />

base.css .

desktop.css - :

div#wrapper { width: 94%; margin: 0 auto; }
div#nav { width: 30%; float: left; }
div#content { width: 70%; float: left; }
div#extra { clear: both; }

desktop-wide.css - :

div#nav { width: 20%; }
div#content { width: 60%; }
div#extra { width: 20%; clear: none; float: left; }

, , , , .

my wiki , .

Answer 2

" ", ? , . , CSS ?

, , :

, . , ( , -) - . , .

-, 500 . (, ), .

, Internet Explorer - ( Javascript?) , , , . , , , , .