table-cell display and responsive design

[leefloyd]

Often e-commerce sites display product results in a grid format. If there are a fixed number of results per row, then display:table-row and display:table-cell are enough to make it work in modern browsers. What if you want the number of items in each row to be determined by the available width?

How can a table-like layout be accomplished with a fluid and/or responsive page?

• If you have a series of table-cell divs without table-row wrappers, they will all be shown a single row.
• If you use float:left, the equal height feature of table-cell is lost.
• Using a fixed height can truncate the contents of a product or leave too much white space, so the height should be based on the context of the row.

Any ideas?

[Paulie_D]

…but tables consist of rows and columns.

How can you have an indeterminate number of columns?

[wolfcry911]

inline-block

[leefloyd]

Inline-block is indeed what I needed, wolfcry. Thanks!

[Chris Coyier]

The deals page on this site behaves kinda like that: https://css-tricks.com/deals/

Although it does use floats and min-height, so maybe not perfect for you.

If they don’t need to be perfectly table-like, this demo is worth seeing: http://sickdesigner.com/demo/css-masonry/css-masonry.html

I think the future of this is going to be flexbox, but not really worth thinking about yet, since you need production-ready code.

[skunqs]

inline-block is good, but I need the child elements to have fill the parent elements in height and yet act like inline-block, so lets say I set width: 30% and min-width:180px, the elements should drop below and not stay like table cells…

[Author]

Posts