Making a responsive grid

Question

Okay, I'm trying to make a responsive grid, but it is a bit more complicated than that. It has to be able to:

• Resize, be responsive
• The grid should have as many elements in a row as it can fit, and
• There have to to be at least two elements in a row
• The minimum page size is 320px
• A element should maintain aspect ratio

Here's a starter: http://codepen.io/loredonut/pen/KJDAE

A CSS-only solution would be great. Thanks for your help!

Answer 1

There are many grid frameworks that may fit your purpose:

• Foundation
• Semantic Grid
• Golden Grid System

There are also:

• CSS Grid (not fluid)
• 320 and Up (not fluid)
• Columnal (not fluid)
• Skeleton (not fluid)
• SimpleGrid (not fluid)
• Less Framework (not fluid)
• Bootstrap (non-semantic classes)
• Breakpoints.js (only breakpoints, too similar to media queries)
• Adaptive images> (only images)
• FitText (only text)
• HTML5 Boilerplate (old)

See this related question.

My personal favorite is Foundation by the way. It is very actively developed and is based on Compass/Sass.

Answer 2

I now used <img>s and made them responsive, here's a demo: http://codepen.io/loredonut/pen/FGneA

Answer 3

There is a lot of grids you can use.

Since it looks like you are going for mobile screens, too, have a look at

960 Grid
1140 Grid

Most of the grids will give you x number of responsive columns, which on smaller screen sizes collapse to 100% width.

Now if you really want to get fancy have a look at CSS-column-count and CSS-colum-gap - found here CSS tricks, (caniuse). Although you need some fallback for IE6-9, this should allow you to make colums with different row height - as in this fiddle.

Answer 4

Try using twitter bootstrap.. http://twitter.github.io/bootstrap/

and u can also combine it with isotope http://isotope.metafizzy.co/ and get MAGIC effect :)

this also could save u hours in integrating isotope with bootstrap: http://mpezzi.github.io/bootstrap_isotope/