Question

I am seeking a jQuery or CSS technique to make the number of columns on a website layout increase and decrease depending on the site of your viewport. For example, an iphone would have 1 column, 800×600 would have 2, 1024×768 would have 3…and so on

Any Ideas?

Answer 1

Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:

• 320 and up:

  ‘320 and Up’ prevents mobile devices
  from downloading desktop assets by
  using a tiny screen’s stylesheet as
  its starting point.

• Lessframework:

  Less Framework is a CSS grid system
  for designing adaptive web­sites. It
  contains 4 layouts and 3 sets of
  typography presets, all based on a
  single grid.