How to make a fluid grid with fixed width columns?

Question

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

I need to make a grid of square items with fixed widths and heights and fixed distance between them.

I need three columns maximum, and during browser resizing I would need this grid to shrink to two, and then one column (items must always keep their size and distance between them).

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?

Answer 1

CODEPEN

html,

<div class="container">
  <div class="inner-container">
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
  </div>
</div>

and the css,

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;

  text-align: center;
}

.container {
  /* width = 200 * 3 + 25 * 2 = 650 */
  float: left;
  position: relative;
  left: 50%;
}

.inner-container {
  float:left;
  position: relative;
  left: -50%;
}

.container::after {
  content: '';
  display: block;
  clear: both
}

.box {
  float: left;
  background-color: blue;
  width: 200px;
  height: 200px;
  margin-right: 25px;
  margin-bottom: 25px;
  display: inline-block
}

.box:last-child {
  margin-right: 0
}

this way, a b and c will retain its original width and height. When the container does not have sufficient width, c will go down, then b.

Answer 2

Just a random simple mock-up for a page with a bunch of squares, resize result at will:

http://jsfiddle.net/cuAfg/

HTML:

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  /* etc */
</div>

CSS:

.container {
    width: 960px;
    margin: auto;
    overflow: auto;
}
@media only screen and (max-width : 960px) {
    .container {
        width: 640px;
    }
}
@media only screen and (max-width : 640px) {
    .container {
        width: 320px;
    }
}
.block {
    width: 300px;
    height: 300px;
    float:left;
    margin: 10px;
    background: #ccc;
}

Answer 3

if your blocks have a known width and horizontal margins, you can set a maw-width on parent container to allow maximum 3 of them per lines.

For instance, a 200px square boxe with 40px margin around, 900px of width would allow 3 of them, the fourth will go down.

Once it shrinks, only 2 are left and so on.

Demos with float, inline-block or flex .You may set a min-width too if you like.

Method used does not really matters here :) .

Answer 4

There are a couple of techniques. Since your question is vague I can only cover them in general terms.

First you start with a fixed with:

width: <number>px;

Then to create columns you can do:

display: inline-block;

Or

float: left;

If you go with floats you may need to overflow: auto on the main container so the main layout doesn't collapse.