More layout options with grid positioning
CSS3 now has a new proposal for laying out websites, with the release of the first working draft of the grid positioning module. The new module makes it easier to define layouts using typographic grids (see Khoi Vinh’s website for a good introduction).
Used in conjunction with the multi-column layout module, you can use the new gr measurement unit to define objects that span multiple columns:
body { columns:3; column-gap:0.5in; }
img { float:page top right; width:3gr; }
Or, using the new grid-columns and grid-rows declarations, you could quickly divide up a page for layout purposes:
body { grid-columns: * * (0.5in * *)[2];
grid-rows: 20% *;
columns:3; column-gap:0.5in; }
I’ve only had the chance for a cursory look at this so far, but it strikes me that it’s not quite as intuitive as it could be, although I need to have a proper look before I can put my finger on exactly why. However, it’s a nice attempt by the W3 to solve the problem of print-style layouts, and after further revision I’m sure it will be a welcome addition.
Vertical grids is no problem today. It can be done. However vertical grids are nearly impossible to achieve!
I hope this specification will make it into the CSS 3 recommendation. (What I really hope for is to see implementation today. Not that it is going to happen anytime soon.)
Más opciones para estructuras con css3…
Nuevas opciones sobre el módulo de "layouts" de las css3 nos permiten un mayor control a la hora de la creación de nuestras páginas….
I’m not entirely clear on what the benefit this grids module has over the advanced layout one. They seem to be solving the same problem, although advanced layout is much more intuitive. Anyone have any ideas?
[...] CSS3 ile birlikte sayfa planlamayı kolaylaştıran araçlar geliyor. Sayfayı ızgara(grid) gibi bölüm planlama işlemini yapabilecekmişiz. Link [...]