CSS fluid tricky grid

Question

So my question is rather simple, tho I've been spending days trying to find a solution.

The code below shows the result I get with values in pixel :

html part :

<div id="wrapper">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>

css part:

#wrapper { margin:30px auto; width:768px; }
#wrapper ul { width:771px; list-style:none; list-style-type:none; padding:0; margin:0; overflow:hidden; }
#wrapper li { width:254px; height:254px; margin-right:3px; margin-bottom:3px; background:#ebebeb; float:left; }

Here's a link that sums up the above: http://jsfiddle.net/7aXLu/

I am trying to make the whole thing "fluid", so that when being resized, the structure remains the same.

So here's the catch: in order NOT to use a bazillion of media queries, I'd like to express my values in percentage, knowing that :

the box width must be equal to 1/3 of the wrapper
the box height must be equal to its width (solved: Responsively change div size keeping aspect ratio)
right margins should be equal to 3px
bottom margins MUST be equal to right margin
no extra margin, or padding (nor ugly cheats)

I am trying to stick with a 100% CSS solution, but I guess I might be forced to use Javascript.

I am open to any suggestion, even if you don't have an exact clue.

Thanks in advance.

Point #2 is solved here: http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio — cimmanon, Sep 19 '13 at 17:23

cimmanon · Accepted Answer · 2013-09-19T17:48:48.667

http://cssdeck.com/labs/6w8wczs5

#wrapper {
    margin: 30px auto;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#wrapper:before {
  display: block;
  content: '';
  padding-bottom: 100%;
}

#wrapper ul {
    position: absolute;
    top: 0;
    right: -3px; /* to offset margin-right (use 0 if you don't want the offset) */
    bottom: -3px; /* to offset margin-bottom (use 0 if you don't want the offset) */
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

#wrapper li {
    width: 33.33333%;
    height: 33.33333%;
    /* using borders here instead of margins for box-sizing purposes
    to avoid using extra elements */
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    background: #ebebeb;
    box-sizing: border-box;
    display: inline-block;
}

Adjusted the markup so that inline-block could be used instead of floats:

<div id="wrapper">
    <ul>
      <li>a</li><!--
      --><li>b</li><!--
      --><li>c</li><!--
      --><li>d</li><!--
      --><li>e</li><!--
      --><li>f</li><!--
      --><li>g</li><!--
      --><li>h</li><!--
      --><li>i</li>
    </ul>
</div>

Note that I'm using borders instead of margins on the li to get smaller CSS. To do it with margins instead, you'll have to use an extra element.

Adjusted CSS to avoid using borders and extra element:

http://cssdeck.com/labs/6w8wczs5

#wrapper li {
    width: 33.33333%;
    height: 33.33333%;
    padding-right: 3px; /* may be optional */
    padding-right: 3px; /* may be optional */
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}

#wrapper li:before {
  position: absolute;
  background: #ebebeb;
  top: 0;
  right: 3px;
  bottom: 3px;
  left: 0;
  content: '';
  z-index: -1;
}

This is quite amazing. My only concern being that the CSS3 border-box property is currently a working draft, with an estimated global browser support of 15.83%. — , Sep 19 '13 at 17:54
No it isn't (see: http://caniuse.com/#search=box-sizing). 93.57% of browsers support `box-sizing: border-box` (prefixed or otherwise). Support for `box-sizing: padding-box` is 15.83%. — cimmanon, Sep 19 '13 at 17:56
Fair enough. I am going to stick with your wonderful workaround, keeping in mind that I'll probably consider using extra markup regarding margins (instead of borders). Thanks again! — , Sep 19 '13 at 18:01

CSS fluid tricky grid

1 Answers1