CSS grid layout
En tots els sistemes de programació d’interfícies sempre hi ha hagut el tema principal del Layout, o sigui com es disposen els diversos objectes en un diàleg o pàgina perquè es puguin veure bé i si canvia les mides es continuï veient correctament.
Des dels inicis del disseny web, això sempre ha portat cua. En un principi s’utilitzava l’etiqueta TABLE per definir la posició relativa dels objectes. Amb les etiquetes TABLE era possible dir que un determinat element anava a l’esquerra de l’altra o a sota o a sobre. I si canviava la mida de la pàgina web, tot era elàstic.
Però els puristes del HTML de seguida van veure que això no estava bé, que l’etiqueta TABLE havia de servir per definir una taula de valors i no per posicionar els elements a la pàgina. Per posicionar ja hi havia una altra forma d’expressar-ho, amb CSS.
El CSS mai no ha pogut donar una solució fàcil, i encara ara el problema porta cua.
Actualment la solució més utilitzada en CSS és fer servir l’order float:left . Però això no és correcte, float:left ha de servir per posar imatges al mig de les columens del text, com si fos un diari i no per posicionar.
Molts dissenyadors encara no han vist que la solució correcte en CSS és display: inline-block. Inline block li diu al navegador que un element va al costat de l’altre en comptes de posar-les una a sota de l’altre com passa amb display:block . Ara bé per desgràcia inline-block pot donar problemes amb navegadors antics i sobre tot amb IE6 i IE7. I també cal dir que inline-block sigui una solució gaire ben aconseguida, cal escriure l’HTML de la pàgina web en una seqüència concreta perquè tot surti bé.
El W3C l’organisme que se’n cuida de definir el CSS encara està treballant en una solució molt millor, el CSS3-Grid, però encara hi està treballant.
Mentre no acaben el CSS3-Grid, l’alternativa és utilitzar un dels diversos frameworks amb Grid layout:
