What is the best way to arrange a responsive catalog grid?

[Krish1980]

I’m trying to create a catalog page, and I’d like to create a grid 4-column wide, which later on becomes 2, and eventually 1. Now, had the content been uniform, it would have been easy (for example images of the same size). I could have simply used percentages such as 25%, 50%, and then 100% for the column widths at the desired breakpoints. However, below the images would be the product names, some of which could spill into two lines. In this case, just floating the containers and setting the percentages won’t work since a longer product name would break the design.

I’ve created a pen, which works, but seems very clunky and has additional divs.

example

I was wondering if there was a cleaner, more efficient way of doing this, without the use of span-2 (in the example), and perhaps just a single row wrapper for the product blocks(span-4s).

[Paulie_D]

Use display:table-cell?

http://codepen.io/Paulie-D/pen/uwixd

You still need to use ‘rows’ but you’d need to do that anyway.

[Paulie_D]

The only reason why I created span-2 was to make the layout two column at 600px width, and then later 1 column at 400px. I was wondering if there was an alternative method.

If you need specific widths you can still do that using classes, I was solving your text-overflow issue (also the equal heights you would need).

I’m sure there are alternate solutions, flexbox for one, but they will depend on what browsers you want to support. and whether you want to use JS/JQ.

[Author]

Posts