Grid 9 60 es un framework d e css qu e fa ci li ta l a maqu etación a u n están dar de 9 60 px . En este tuto ri alv amos a c re ar u n pá gina util iz and o este framewo rk .

P ara emp ez ar, ¿ Qué e s 96 0 Grid?

9 60 Grid es un framework d e CS S que n os faci li ta la v id a e n un mil por ci ento (si l o sa bemo s u til iza r).Es te g rid s e c reó p or la ne cesida d de ten er un “están dar” e n el a ncho de los siti os web . En nu estros

d ía s y a es só lo u n peq ueñ o po rcen ta je d e usu ario s que u ti li za n re solución d e 80 0 x 60 0 pixe les ,mientras l a ma yo rí a ya u ti li za res olu cione s de 10 24 x 768 px o may ores . Es po r e so qu e un gru po d e

p erso nas d ecidió crea r este si stema de ma que ta do b asa do e n 96 0px d e an cho , co n con figu racione sd e 12 y 16 co lu mnas pa ra po der co mb in ar entre sí y a sí crea r nu estros l ayo ut de un a forma simp le y

ráp id a.

Co no cien do e l g rid

C omo l es menc io nab a, p od emos uti li zar 12 o 16 c olumnas p ara crear nu estros la yo uts, ca da u na de

las co lu mn as tien e un marge n iz quierdo y dere cho d e 10 px , pa ra c re ar 20 px de s epa ración en trec olumnas . Sab ie nd o esto, dec imos q ue si u tili zo 1 2 co lu mn as, c ad a c olumna se rá d e 60 px c ada u na y

sí util iz o 16 c olumnas , el an cho de ca da un a será de 4 0p x. P orqu e no v isi tan la p ág ina d emo. Pod ráno bse rvar una g ama d e c omb ina cio ne s p ara da rse una ide a de co mo tra ba ja es te frame wo rk.

V eremo s a hora c omo es q ue se di vide e l grid en un a con fig uración d e 12 c olumnas :

1 . 60 px2 . 14 0p x

3 . 22 0p x4 . 30 0p x

5 . 38 0p x6 . 46 0p x7 . 54 0p x

8 . 62 0p x9 . 70 0p x

10 . 78 0p x11 . 86 0p x

12 . 94 0p x

C omo v erán , cad a un a d e la s fi la s l le va u n número , qu e s erá el i de ntific ad or; es d eci r, el an cho de l a

c olumna co rre spo nd e al nú mero de a l a pa r. Y se forma así : g rid_x x d ond e “xx” es el n umero d e lal ista . Pero,¿Có mo 96 0 grid sab e sí uti li zo 1 2 o 16 columna s? S imple, ti ene u na cl ase .container_ yy,

d on de “yy” e s e l nu me ro de co lu mn as qu e vo y a util iz ar.

B asta de p al abre rí a, v amos a c re ar u na p ágina web c on uti li zan do e ste fra me wo rk y 12 c olumna s.

Ma qu eta nd o co n 9 60 Grid

Grid d e 12 columna s

La v erd ad es muy s enci ll o maq uetar así , y a l ob serva r l a imag en no s damo s una idea d e co mo hac erlo .

Pa ra lo s fi nes d e este tutori al, vamo s a c rear un la yo ut para un s itio fi ctic io l la ma do V os -V oz (no s e meo currí a otro no mb re).

Hay u no s p unto s impo rta ntes an te s:

IMPOR TA NT E, d ebe mo s sab er a l meno s lo b asi co en x html y cssIn cluir text, res et y 9 60 css’s en el h tml

Hay qu e co lo car un <d iv class= ”clea r”> </d iv > des pue s de ca da fil a, e sto se de be a q ue ca daco lu mn a está co n un flo at:l eft

Us aremos los id p ara d iferen cia r u n div de o tro

02-12-2010 960 Grid, un framework para CSS /// Je…

jepserbernardino.com/…/960-grid-un-fra… 1/1