Any ideas on how I could implement a grid-view in CSS? - CSS

Question

Hi folks!

Here is an example grid-view:

Also another example from TED.com

---

Any ideas on how I could go on about implementing a dynamic grid like this in CSS?

I guess it might have something to do with dividing the box in units styled with float:left, and each unit would have a border if on a boxes border.

Help would be very appreciated =)

Answer 1

I've achieved a similar grid in the past with David Desandro's awesome jQuery Masonry plugin. As that page illustrates, CSS floats aren't so great for grid layouts, and setting up "units" like you describe could be a massive headache, depending on the complexity of the grid and range of cell sizes.