Responsive grid with fixed column width

Question

I guess I have the simplest problem ever and cannot find a ready solution.

I need to make a grid with fixed widths and fixed distance between them.

I need x columns a 400px (x = total width/400), and during browser resizing I would need this grid to shrink, column by column (columns must always keep their width size and distance between them).

The content flows over all columns and should spread out over all columns.

That's why I don't like any open source grid system (Boostrap, Skeleton, etc.) they all use %width, and columns always change width on resizing.

What would be the simplest way?

Edit/Clarification:

This is how it looks without columns: http://jsfiddle.net/xjrt8qrm/16/show/

<div>See the fiddle</div>

I want it to have x columns. x is the maximum possible amount of 400px columns, depending on the users resolution. I want only one row of columns, so the content spreads like on a newspaper from top to bottom.

So it will look somehow like this on a PC: http://i.imgur.com/kmd620p.png (You can ignore the text/comments there).

Answer 1

It's pretty simple. The container holds the contents together. Float left will cause them to line up left to right. When the container runs out of space to hold them, they'll drop from the right to a row below one at a time. The clear div clears out the float so that it doesn't propagate to other nearby classes. Obviously, you'll have to handle padding, margins, etc as your style dictates.

If you needed newspaper like vertical layout, you could try a solution like this one

You could use media queries in this manner or even overflow:none to hide columns that didn't fit if that was your desired behavior.

Here's a simple solution:

HTML:

<div class="container">
      <div class="fourhundred">
          Div 1
      </div>
      <div class="fourhundred">
          Div 2
      </div>
      <div class="fourhundred">
          Div 3
      </div>
      <div class="clear"></div>
    </div>

CSS:

.fourhundred { 
  width: 400px;
  margin: 10px;
  float: left;
}
.clear { clear:left }
.container { width: 100% }

Answer 2

This is why flexbox have been designed. Add to your container:

.container {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
    width:100%;
}

as in this Fiddle

Answer 3

Simply used width: calc(100% / 3); you can use any value instead of 3. Divided the whole width into 3.

here is the Fiddle Demo

<div id = "main">
    <div id ="sub">One
    </div>
    <div id ="sub">Two
    </div>
    <div id ="sub">Three
    </div>
</div>

CSS Part

#main{
    border: 2px solid black;
    height:100px;
    width:100%;
    position: relative;
    display:flex;
}
#sub{
    border:1px solid red;
    width: calc(100% / 3);
    height: calc(100% - 40px);
    padding:10px;
    margin : 5px;   
    display:inline-block;
}