CSS 3 - Grid Positioning is Coming!

on Sep 20, 2007

Blog title image - CSS grids

Ever wanted to lay out content on your website in a newspaper column style using CSS but quickly discovered it was actually very difficult and required almost as much code ‘bloat’ as using tables did?

Well, I have for sure, and am very happy to read that columns and grids are getting official support in CSS 3. Indeed, you may already haunt the w3.org site regularly, salivating for updates and goodies that you can expect to play with but for those of you who don’t know, there is currently a draft 5 of the module available here to read.

Of interest is the ability to divide up text and image content automatically by defining the number of columns you want to use and even floating an image proportionally in relationship to the grid.

Quoting from the W3 draft:

body { columns:3; column-gap:0.5in; }
img { float:page top right; width:3gr; }

This enables you to automatically lay out your content like in the following image:

w3.org example image of multi-column grid

I’m excited by the possibility to provide more engaging layouts for the content once a site design is complete. Often when completing a design template, it can be frustrating to provide a variety of ways for users to change the layout of the text and images for their content without introducing extra mark-up.

So the Grid Positioning is a welcome addition to the CSS family, however, it will be a challenge to incorporate this functionality for browsers that don’t support CSS 3, and so options that allow the content layout to degrade gracefully will have to be developed. For example, CSS 2.1 is now a cross-browser standard but it took a number of years for it to be adopted properly.

Hopefully uptake will be quicker this time around.


7 Comments »

  1. Comment by Dmitry Fadeev — Sep 20, 2007 @ 2:09 am

    First post from Myles :) The blog is really starting to roll now.

    Grid positioning, especially the column module is interesting because its importance is also arguable in the design industry. In an attempt to provide some valuable food for thought, I will throw in a comment questioning the value of multiple columns on the web. You have to look back at the reasons why the columns were first invented and used to really understand the context in which they serve their function properly.

    Reading is tiring. It is much more tiring if the columns are very wide, or if there are no columns and the page is wide. Why is this? Because your eyes have to travel from the end of the line of text, to the beginning of the next line quite some distance. This isn’t a big deal at first, but after you read an article or two you will start to feel the strain. Newspapers realized this and split the text up into columns to improve readability. They wanted their content easy to digest so to speak. The limits of the physical page mean that columns are stacked horizontally. The web is a different affair—there are no limits to the vertical height, and so stacking columns horizontally may actually harm readability.

    Roger Johansson of 456 Berea Street put it quite bluntly saying that: “Too many designers value ‘creativity’ above readability, usability, and accessibility. Using multiple columns in a print stylesheet may be useful, but onscreen, for longer articles? No. Face it, the Web is not a printed magazine.”

    Note that I do not necessarily agree with Mr Johansson. One more crucial point to consider is the screen real estate. The computer monitor is not limitless, it only displays a certain amount of pixels at any given time, so if it’s necessary to fit something “above the fold”, then columns may be the right tool for the job. I think in the future, when this module is out, we just need to be a little bit careful about how we use it. Thinking back to the original context columns were used, analyzing your particular situation and then deciding whether columns are appropriate would make for more intelligent and strategic design. Anyways… sorry for the long comment, just wanted to throw some thoughts in :)

  2. Comment by Myles de Bastion — Oct 5, 2007 @ 12:45 pm

    Naturally! And to summorize Dmitrys lengthy reply. “too much of anything is usually not good for you”.

    So in this case, abusing columns may make your content a little more difficult to read but when used appropiately (as with any web design technique) it will come into it’s own.

  3. Comment by parker — May 3, 2010 @ 12:20 pm

    good to see theres still some people who write good content!

  4. Comment by web page design wallpaper — Jun 3, 2014 @ 3:39 pm

    However, many websites have forgotten this fact and made intricate designs out of it,
    such as using dark font colors against dark backgroud or white font color with light background.
    M commerce facilitates the individuals to buy and sell their goods and services through wireless handheld devices such as mobile phones and personal digital assistants.

    Unfortunately, trusting such an important job to someone
    who may or may not be qualified may end up being a huge
    financial mistake, costing your company thousands,
    or even millions of dollars.

  5. Comment by LeonardGync — Feb 21, 2016 @ 3:35 pm

    free tube porn - free porn elephant tube, porn tube free.

  6. Comment by AlbertDup — Feb 21, 2016 @ 3:41 pm

    fisting porn xhamster - hamster porn, xnxx.

  7. Comment by Alfredphip — Mar 26, 2016 @ 5:46 am

    Наш ресурс представляет вашему вниманию отличные мультфильмы, но они далеко не для детей, потому что там происходят такие извращения, которые только может вообразить самая испорченная человеческая фантазия. Смотрите порно мульты и удивляйтесь самому безбашенному порно

RSS feed for comments on this post. TrackBack URL

Leave a comment

Contact Information

If you would like a quote or a project proposal, just click here to fill in our short client web form and we'll get right back to you.

Direct Contact Details

Email Email: info@pixelshell.com Skype Tel: +44 (0)20 8816 8876