choosing a responsive/fluid grid framework/template

Question

Hey so I have been looking around online at some examples of fluid grids and responsive grid frameworks (I believe I am looking for fluid but still unsure). And wondering if anyone here can help point me into the direction of some usable code as I am not entirely sure how to implement with pure css (maybe javascript/jquery is needed) anyways here's what I am looking for:

larger screens look like this

a little bit smaller of screen

smaller screen still

(in the images each block appears a little larger as screen sizes decrease this is not what i am really looking for each screen should be same size ... if you have seen netflixs genre pages this is exactly what I am looking for)

I don't need a finish polished code sample but just how I would go about doing this (having 15 media queries to just handle the grid and moving element around does not seem like the answer or is it ?) Any insight into how I can do this or a framework or demo where this is being implemented would be greatly appreciated.

Answer 1

Pretty much I don't see a point in using a grid for this. It will give you even more headache than to help you. Since most grids will try to make the elements responsive and will resize them in order to fit them on the same line on smaller width. And since you don't want the images to resize, don't go to responsive grids at all...

You can choose a normal grid but why importing 1000+ lines of code for something that can be done in 1 line.

Pretty much one line of code (if written on one line that is):

ul li {
    display: inline-block;
    *display: inline;
    zoom:1;
    vertical-align: top;
    width: 50px;
    height: 50px;
    margin: 0 10px 10px 0;
    background-color: #000;
}

Demo