La logica delle 'colonne' nel responsive

[LuckySevenRoX]

Salve, mi sto avvicinando da qualche tempo al responsive design.
Non ho problemi per quanto riguarda l'implementazione "base" del layout responsive (media queries in base alla dimensione dello schermo) o l'utilizzo di framework.. quello che non riesco a capire però è la teoria che c'è dietro le 'colonne'..

Cosa sono queste colonne? come 'dovrebbero' essere utilizzate? perchè servono? come devono essere implementate?

Ad esempio ho provato ad utilizzare il Less Framework in modo 'grossolano', ma senza curarmi delle colonne so che con uno schermo di dimensione X ottengo questo, mentre con uno di dimensione Y quest'altro. Come dovrei utilizzare la sua suddivisione in colonne in modo ottimale?

[Cesar]

A che colonne ti riferisci?

[LuckySevenRoX]

se prendiamo come esempio il Less Framework parla di colonne da 68px con gutters da 24px.. mi riferisco a queste!

[Cesar]

Ok, quindi cosa non ti è chiaro?

[LuckySevenRoX]

quello che ho detto, a cosa servono queste colonne!

prendiamo ancora come esempio il Less:

/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	width: 896px;
	padding: 72px 48px 84px;
	background: rgb(232,232,232);
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

come vedi in questo caso mi dice che le colonne corrispondono a quei px (la prima sono 68px, la seconda (68*2)+24px ecc..).. ma come dovrei utilizzare queste informazioni? devo fare dei div che corrispondono a quelle larghezze? a quante/quali colonne devo affidarmi?

Faccio questa domanda perchè se faccio un div di 456px o 123px il responsive funziona comunque (ovviamente) grazie alle media queries.. ma da quello che ho capito sfruttare queste colonne serve ad ottimizzare tutto.. ora.. come si sfruttano?

[LuckySevenRoX]

nessuno?

[Prill]

Le colonne forniscono una griglia alla quale attenersi per disporre il tutto in maniera armonica in base alle varie risoluzioni, sono delle guide. Ad esempio se vuoi due div affiancati e al di sotto di questi 4 div affiancati, hai delle informazioni sulla larghezza da indicare nei layout per le diverse risoluzioni o sui margini da assegnare eccetera

[LuckySevenRoX]

ok questo volevo capire, se erano solo delle guide o se c'era un modo più specifico di utilizzarle.
Quindi mi servono 'solo' per ridefinire facilmente le dimensioni dei div nelle diverse risoluzioni giusto?

[Prill]

sì, per stabilire dimensioni e posizioni di elementi che abbiano una disposizione precisa e schematica (vedi le singole colonne) e per ridimensionarli alle varie risoluzioni