1

This list of speakers from jQuery Portland uses a 3 column layout (at desktop browser widths) in which individual elements can grow to displace items beneath them, without affecting other columns. The downside is that this requires 3 column containers in the markup.

Is it possible to get the same effect with a simple list, and no column containers with only css?

I've never used flexbox before, but I can't seem to make items wrap without coupling rows between columns codepen example.

Sinetheta
  • 9,189
  • 5
  • 31
  • 52

1 Answers1

1

Is it possible to get the same effect with a simple list, and no column containers with only css?

Answer to this: You can also use column-count

demo

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • Perfect, thank you very much [another demo](http://codepen.io/Sinetheta/pen/Esyuf) – Sinetheta Jul 22 '13 at 03:48
  • 1
    You added your demo as an edit while I was testing with `column-count` on my own ;) Also the `break-inside` property came in handy, as detailed in [this other question](http://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element). – Sinetheta Jul 22 '13 at 04:02
  • 1
    Be aware that Firefox does not support break-inside, and webkit browsers use the old name of column-break-inside (prefixed). – cimmanon Jul 22 '13 at 14:23