More layout options with grid positioning

200713 Sep
More layout options with grid positioning
by Peter Gasston
Posted in Declarations, Modules, W3C
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.
You can skip to the end and leave a response.
Comments
- 01.
  
  Daniel Aleksandersen says:Comment » September 13th, 2007 at 2:31 pm
  
  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.)
- 02.
  
  webeame.net says:Comment » September 14th, 2007 at 8:22 am
  
  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….
- 03.
  
  Allan Jardine says:Comment » September 15th, 2007 at 10:34 am
  
  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?
- 04.
  
  Fatih Hayrioğlu’nun not defteri » 16 Eylül 2007 Web’den Seçme Haberler says:Comment » September 16th, 2007 at 11:50 am
  
  [...] CSS3 ile birlikte sayfa planlamayı kolaylaştıran araçlar geliyor. Sayfayı ızgara(grid) gibi bölüm planlama işlemini yapabilecekmişiz. Link [...]
- 05.
  
  Positioning, no get your mind out of the gutter… « CSS Schema says:Comment » August 4th, 2008 at 9:53 am
  
  [...] found some nice stuff here and some info about positioning in CSS3 here. [...]

Subscribe to our RSS

OUR SPONSORS

Advertise here?

CATEGORIES

FRIENDS

Meta

Hosting by:

CSS3

Comments

Leave a Comment