quello che ho detto, a cosa servono queste colonne!

prendiamo ancora come esempio il Less:

codice:
/*		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?