Ami kisebb, az gyorsabb is.Ha az egyes oszlopok szélességét százalékokkal adjuk meg, megkerülhetjük azt a problémát, hogy minden képernyőszélességhez külön számoljuk a pixeleket. (Ez kevesebb css-t, ezáltal gyorsabb oldalbetöltődést jelent.) Az alábbi linken ki is számolták szépen az egészet, gyönyörű százalékokat kaptunk:

  .container                 { width: 90%; } /*whatever you want - can even be fixed if you prefer*/
  .container .column,
  .container .columns        { margin-left: 0.78125%; margin-right: 0.78125%;  }
 
  .container .one.column,
  .container .one.columns    { width: 4.6875%; }
  .container .two.columns    { width: 10.9375%; }
  .container .three.columns  { width: 17.1875%; }
/*... etcetera*/

http://webdesign.tutsplus.com/tutorials/building-a-responsive-layout-with-skeleton-widescreen–webdesign-7473

Hogy is csinálták?
.container .columns { margin-left: 0.78125%; margin-right: 0.78125%; }
Köszi.

Átszámolás

Egyezzünk meg inkább 2-2% bal és jobb margóban. Ez összesen 4%.
Akkor a legszélesebb oszlopunk 96%.
Akárhány oszlopunk lehet, ha (mint itt) 16, akkor egy oszlop szélessége (100-(16*4))/16 = 2.25%.
Margóval együtt 2.25 + 4 = 6.25% (6.25*16 = 100%, akkor helyes).
Ez a 6.25% lesz egyébként egy oszlopnyi behúzás (offset) mértéke.

  .container .column,
  .container .columns        { margin-left: 2%; margin-right: 2%;  }
  .container .one.column,
  .container .one.columns    { width: 2.25%; }

A többi ennek a 6.25%-nak a többszöröse (csak vonjuk le a 4% margót mindegyikből).
(6.25*16)-4 = 96%

  .container .two.columns     { width: 8.5%; }
  .container .three.columns   { width: 14.75%; }
  .container .four.columns    { width: 21%; }
  .container .five.columns    { width: 27.25%; }
  .container .six.columns     { width: 33.5%; }
  .container .seven.columns   { width: 39.75%; }
  .container .eight.columns   { width: 46%; }
  .container .nine.columns    { width: 52.25%; }
  .container .ten.columns     { width: 58.5%; }
  .container .eleven.columns  { width: 64.75%; }
  .container .twelve.columns  { width: 71%; }
  .container .thirteen.columns{ width: 77.25%; }
  .container .fourteen.columns{ width: 83.5%; }
  .container .fifteen.columns { width: 89.75%; }
  .container .sixteen.columns { width: 96%; }

Offset-ek

A legszélesebb oszlopra nem kell behúzást számolni, az összes többire igen.

/* Offsets */
  .container .offset-by-one       { padding-left: 6.25%; }
  .container .offset-by-two       { padding-left: 12.5%; }
  .container .offset-by-three     { padding-left: 18,75%; }
  .container .offset-by-four      { padding-left: 25%; }
  .container .offset-by-five      { padding-left: 31,25%; }
  .container .offset-by-six       { padding-left: 37,5%; }
  .container .offset-by-seven     { padding-left: 43,75%; }
  .container .offset-by-eight     { padding-left: 50%; }
  .container .offset-by-nine      { padding-left: 56,25%; }
  .container .offset-by-ten       { padding-left: 62,5%; }
  .container .offset-by-eleven    { padding-left: 68,75%; }
  .container .offset-by-twelve    { padding-left: 75%; }
  .container .offset-by-thirteen  { padding-left: 81,25%; }
  .container .offset-by-fourteen  { padding-left: 87,5%; }
  .container .offset-by-fifteen   { padding-left: 93,75%; }
/*.container .offset-by-sixteen   { padding-left: 100%; }*/

Harmadok

A 16-oszlopos számolásunk alapján:
(100-(3*4))/3 = 29.3333333333%

  .container .one-third.column    { width: 29.33%; }
  .container .two-thirds.column   { width: 62.66%; }

Container – media queries

Ezt a részt mindenki az adott honlap igényeit figyelmbe véve kell hogy kialakítsa

/* #Base 960 Grid
================================================== */
.container  {
  width: 960px;
}
/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container  {
    width: 768px;
  }
}
/*  #Mobile (Portrait)
================================================== */
    /* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
  .container  {
    width: 300px;
  }
}
/* #Mobile (Landscape)
================================================== */
    /* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container  {
    width: 420px;
  }
}

vagy akár egy sorral, media queries nélkül:

  .container  { width: 90%; } /*whatever you want - can even be fixed if you prefer*/

A töréspontok kialakításánál érdemes megszívlelni az egyik előző postban idézett jótanácsokat.*
A fenti számolások alapján bármilyen oszlopszámra át lehet számolni a százalékokat, egyszerűbb landing page-ekhez, vagy összetettebb oldalakhoz.

*Itt:
http://blog.blackmill.eu/mobile-first/